import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import SettingContainer from '../../components/SettingContainer';
import { useEffect } from 'react';
import { useAppStateContext } from '../../contexts/AppState';
import { SETTING_LINK } from '../../constants';

const Setting: React.FC = () => {
  const { setTabActive } = useAppStateContext();

  useEffect(() => {
    setTabActive(SETTING_LINK);
  }, []);

  return (
    <IonPage>
      <IonHeader className='ion-no-border'>
        <IonToolbar>
          <IonTitle>
            <div>{'Setting'}</div>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse='condense'>
          <IonToolbar>
            <IonTitle size='large' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div>{'Setting'}</div>
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <SettingContainer name='Setting page' />
      </IonContent>
    </IonPage>
  );
};

export default Setting;
