import { IonButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../../components/ExploreContainer';
import QuizzesMainMenuContainer from '../../components/QuizzesMainMenuContainer';
import './style.css';

import { Helloworld } from '../../public_data/index';
import { useEffect, useState } from 'react';
import { triangle } from 'ionicons/icons';
import { HelloworldImage } from '../../components/HelloworldImage';

const ListeningPractice: React.FC = () => {
  let [show_meta, setShowMeta] = useState({});
  useEffect(() => {
    (async () => {
      let result = await Helloworld();
      console.log(result);
      setShowMeta(result);
    })();
  }, []);
  return (
    <IonPage>
      <IonContent fullscreen>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <div style={{ margin: '1rem 0 1rem', width: '5rem', height: '5rem' }}>
            <HelloworldImage />
          </div>
          <div>Choose the Chapter you want to revise</div>
          <div style={{ width: '80vw' }}>
            {['Technology', 'Art', 'Nature', 'Workforce', 'Sports', 'News', 'Connectives'].map(item => (
              <div style={{ margin: '0.9rem 0 0.9rem' }} key={item}>
                <IonButton expand='block' href={`/listening_practice/${item}`}>
                  {item}
                </IonButton>
              </div>
            ))}
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default ListeningPractice;
