import { IonButton, IonIcon, IonItem, IonLabel, IonList } from '@ionic/react';
import './QuizzesMainMenuContainer.css';
import { chevronBack, chevronForward, heart, logoIonic, volumeHighOutline } from 'ionicons/icons';

interface ContainerProps {
  name: string;
}

const QuizzesMainMenuContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <div className='quizzes_main_menu_container'>
      <div>
        <span className='title'>Revision Time !</span>
      </div>
      <div>
        <IonButton style={{ margin: '0.5rem 1rem' }}>
          <div style={{ padding: '1rem' }}>
            <div>
              <IonIcon icon={logoIonic} size='large'></IonIcon>
            </div>
            <div style={{ marginTop: '0.5rem' }}>Listening Practice</div>
          </div>
        </IonButton>
      </div>
      <div>
        <IonButton style={{ margin: '0.5rem 1rem' }}>
          <div style={{ padding: '1rem' }}>
            <div>
              <IonIcon icon={logoIonic} size='large'></IonIcon>
            </div>
            <div style={{ marginTop: '0.5rem' }}>Matching Frenzy</div>
          </div>
        </IonButton>
      </div>
      <div>
        <IonButton style={{ margin: '0.5rem 1rem' }}>
          <div style={{ padding: '1rem' }}>
            <div>
              <IonIcon icon={logoIonic} size='large'></IonIcon>
            </div>
            <div style={{ marginTop: '0.5rem' }}>Connectives Revision</div>
          </div>
        </IonButton>
      </div>
    </div>
  );
};

export default QuizzesMainMenuContainer;
