import { IonButton, IonContent, IonHeader, IonIcon, IonImg, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../../components/ExploreContainer';
import LessonContainer from '../../components/LessonContainer';
import './Lesson.css';
import { chevronBack, chevronForward } from 'ionicons/icons';

const Lesson: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            margin: '1rem 1rem',
            justifyContent: 'space-between'
          }}
        >
          <IonButton shape='round' fill='outline'>
            <IonIcon slot='icon-only' icon={chevronBack}></IonIcon>
          </IonButton>
          <div>Vocabulary</div>
          <IonButton shape='round' fill='outline'>
            <IonIcon slot='icon-only' icon={chevronForward}></IonIcon>
          </IonButton>
        </div>
        {/* <LessonContainer name='Tab 1 page' /> */}
        <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
          {Array.from({ length: 7 }).map((_, index) => (
            <div
              key={index}
              style={{
                width: '45vw',
                height: '45vw',
                backgroundImage: 'url(https://docs-demo.ionic.io/assets/madison.jpg)',
                backgroundPosition: 'center',
                backgroundSize: 'cover',
                borderRadius: '0.5rem',
                margin: '.5rem'
              }}
            ></div>
          ))}
        </div>
        <div style={{ textAlign: 'center' }}>
          <p>end of list</p>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Lesson;
