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

interface ContainerProps {
  name: string;
}

const LessonSequencingContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <div className='container'>
      <div>
        <div>
          <p>Quizzes</p>
        </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' }}>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' }}>Listening Practice</div>
            </div>
          </IonButton>
        </div>
      </div>
    </div>
  );
};

export default LessonSequencingContainer;
