import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import QuizzesMainMenuContainer from '../../components/QuizzesMainMenuContainer';

import { useEffect } from 'react';
import { useAppStateContext } from '../../contexts/AppState';
import { COLOR_TEXT, QUIZ_MAIN_MENU_LINK } from '../../constants';

import './style.css';

const QuizzesMainMenu: React.FC = () => {
  let { setTabActive } = useAppStateContext();
  useEffect(() => {
    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

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

export default QuizzesMainMenu;
