import { useEffect, useState } from 'react';
import { Helloworld } from '../../public_data';
import { IonButton, IonContent, IonPage } from '@ionic/react';
import { HelloworldImage } from '../../components/HelloworldImage';

function ConnectiveRevisionSelectCategory() {
  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' }}>
              {['Quiz 1', '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}`}>
                    <div
                      style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%' }}
                    >
                      <div>{item}</div>
                      <div>{'99%'}</div>
                    </div>
                  </IonButton>
                </div>
              ))}
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default ConnectiveRevisionSelectCategory;
