import { IonButton, useIonRouter } from '@ionic/react';
import './QuizzesMainMenuContainer.css';
import { COLOR_TEXT, CONNECTIVE_REVISION_LINK, LISTENING_PRACTICE_LINK, MATCHING_FRENZY_LINK } from '../constants';

interface ContainerProps {
  name: string;
}

const QuizzesMainMenuContainer: React.FC<ContainerProps> = ({ name }) => {
  const router = useIonRouter();

  return (
    <div
      className="quizzes_main_menu_container"
      style={{
        display: 'column',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div style={{ margin: '1rem 1rem' }}>
        <IonButton
          expand="block"
          // href={LISTENING_PRACTICE_LINK}
          onClick={() => {
            router.push(LISTENING_PRACTICE_LINK, undefined, 'replace');
          }}
          fill="clear"
        >
          <div style={{ padding: '1rem' }}>
            <div
              style={{
                width: '60vw',
                height: '30vw',
                backgroundImage: `url('/data/Lesson/images/quiz_listening_practice.jpg')`,
                backgroundSize: 'cover',
                borderRadius: '1rem',
              }}
            ></div>
            <div style={{ marginTop: '2rem', color: COLOR_TEXT }}>Listening Practice</div>
          </div>
        </IonButton>
      </div>
      <div style={{ margin: '1rem 1rem' }}>
        <IonButton
          expand="block"
          // href={MATCHING_FRENZY_LINK}
          onClick={() => {
            router.push(MATCHING_FRENZY_LINK, undefined, 'replace');
          }}
          fill="clear"
        >
          <div style={{ padding: '1rem' }}>
            <div
              style={{
                width: '60vw',
                height: '30vw',
                backgroundImage: `url('/data/Lesson/images/quiz_matching_frenzy.jpg')`,
                backgroundSize: 'cover',
                borderRadius: '1rem',
              }}
            ></div>
            <div style={{ marginTop: '0.5rem', color: COLOR_TEXT }}>Matching Frenzy</div>
          </div>
        </IonButton>
      </div>
      <div style={{ margin: '1rem 1rem' }}>
        <IonButton
          expand="block"
          // href={CONNECTIVE_REVISION_LINK}
          onClick={() => {
            router.push(CONNECTIVE_REVISION_LINK, undefined, 'replace');
          }}
          fill="clear"
        >
          <div style={{ padding: '1rem' }}>
            <div
              style={{
                width: '60vw',
                height: '30vw',
                backgroundImage: `url('/data/Lesson/images/quiz_connectives_revision.jpg')`,
                backgroundSize: 'cover',
                borderRadius: '1rem',
              }}
            ></div>
            <div style={{ marginTop: '0.5rem', color: COLOR_TEXT }}>Connectives Revision</div>
          </div>
        </IonButton>
      </div>
    </div>
  );
};

export default QuizzesMainMenuContainer;