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

interface ContainerProps {
  name: string;
}

const LessonSequencingContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <div className='container'>
      <div>
        <p>Part 1/8</p>
      </div>
      <div className='top_row'>
        <IonButton shape='round' fill='outline'>
          <IonIcon slot='icon-only' icon={chevronBack}></IonIcon>
        </IonButton>

        <div className='category'>
          <p>Sequencing</p>
        </div>
        <IonButton shape='round' fill='outline'>
          <IonIcon slot='icon-only' icon={chevronForward}></IonIcon>
        </IonButton>
      </div>
      <div>
        <IonButton shape='round'>
          <IonIcon slot='icon-only' icon={heart}></IonIcon>
        </IonButton>
      </div>
      <div className='word_content'>
        <p>To begin with,</p>
        <p>首先,</p>
      </div>

      <div className='word_explain'>
        <div>
          <IonButton shape='round'>
            <IonIcon slot='icon-only' icon={volumeHighOutline}></IonIcon>
          </IonButton>
        </div>
        <div className='word_explain_content_test'>
          <div className='word_explain_content'>To begin with, we should bring our own bag to go shopping.</div>
          <div>首先,我們應該帶自己的購物袋去購物。</div>
        </div>
      </div>
    </div>
  );
};

export default LessonSequencingContainer;
