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

const ConnectivesPage: 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>Part 1/8</div>
          </div>
          {/* <LessonContainer name='Tab 1 page' /> */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              width: '80vw'
            }}
          >
            <div>
              <IonButton shape='round' fill='outline'>
                <IonIcon slot='icon-only' icon={chevronBack}></IonIcon>
              </IonButton>
            </div>
            <div
              style={{
                flexGrow: 1,
                display: 'inline-flex',
                justifyContent: 'center',
                fontSize: '1.3rem'
              }}
            >
              Sequencing
            </div>
            <div>
              <IonButton shape='round' fill='outline'>
                <IonIcon slot='icon-only' icon={chevronForward}></IonIcon>
              </IonButton>
            </div>
          </div>
          <div style={{ marginTop: '1rem' }}>
            <IonButton shape='round' fill='solid'>
              <IonIcon slot='icon-only' icon={heartOutline}></IonIcon>
            </IonButton>
          </div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '0.5rem',
              alignItems: 'center',
              marginTop: '2rem',
              fontSize: '1.3rem',
              fontWeight: 'bold'
            }}
          >
            <div>To begin with,</div>
            <div>首先</div>
          </div>

          <div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'row',
                gap: '1rem',
                alignItems: 'center',
                margin: '1rem 1rem 1rem'
              }}
            >
              <div>
                <IonButton shape='round' fill='solid'>
                  <IonIcon slot='icon-only' icon={volumeHighOutline}></IonIcon>
                </IonButton>
              </div>
              <div style={{ fontSize: '1rem' }}>To begin with, we should bring our bag to go shopping</div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '1rem' }}>
              <div style={{ fontSize: '1.1rem' }}>首先，我們應該帶自己購物袋去購物</div>
            </div>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default ConnectivesPage;
