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

const LessonWordPage: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              margin: '1rem 1rem',
              justifyContent: 'space-between'
            }}
          >
            <div>Technology</div>
          </div>
          {/* <LessonContainer name='Tab 1 page' /> */}
          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <div>
              <IonButton shape='round' fill='outline'>
                <IonIcon slot='icon-only' icon={chevronBack}></IonIcon>
              </IonButton>
            </div>
            <div
              style={{
                width: '66vw',
                height: '66vw',
                backgroundImage: 'url(https://docs-demo.ionic.io/assets/madison.jpg)',
                backgroundPosition: 'center',
                backgroundSize: 'cover',
                borderRadius: '0.5rem',
                margin: '.5rem'
              }}
            ></div>
            <div>
              <IonButton shape='round' fill='outline'>
                <IonIcon slot='icon-only' icon={chevronForward}></IonIcon>
              </IonButton>
            </div>
          </div>
          <div>
            <div
              style={{
                width: '2rem',
                height: '2rem',
                display: 'inline-flex',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: '1rem',
                backgroundColor: 'black',
                color: 'white'
              }}
            >
              1
            </div>
          </div>

          <div>
            <div
              style={{ display: 'flex', flexDirection: 'row', gap: '1rem', alignItems: 'center', marginTop: '1rem' }}
            >
              <div>
                <IonButton shape='round' fill='solid'>
                  <IonIcon slot='icon-only' icon={volumeHighOutline}></IonIcon>
                </IonButton>
              </div>
              <div style={{ fontWeight: 'bold', fontSize: '1.8rem' }}>keyboard</div>
              <div>
                <IonButton shape='round' fill='solid'>
                  <IonIcon slot='icon-only' icon={heartOutline}></IonIcon>
                </IonButton>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '1rem' }}>
              <div style={{ fontWeight: 'bold', fontSize: '1.3rem' }}>鍵盤</div>
            </div>
          </div>

          <div
            style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center', marginTop: '2rem' }}
          >
            <div>
              I buy a <span className='bold'>keyboard</span> to type
            </div>
            <div>
              我買了一個<span className='bold'>鍵盤</span>來打字
            </div>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default LessonWordPage;
