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

function MatchingFrenzySelectCategory() {
  let [show_meta, setShowMeta] = useState({});
  useEffect(() => {
    (async () => {
      let result = await Helloworld();
      console.log(result);
      setShowMeta(result);
    })();
  }, []);

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          <div style={{ margin: '1rem' }}>
            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', flexDirection: 'row', gap: '0.1rem' }}>
                <IonIcon icon={alarmOutline}></IonIcon>
                {'1:23'}
              </div>
              <div>Matches:{'12'}</div>
            </div>
            <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div style={{ fontSize: '1.2rem', marginTop: '1rem' }}>Match the correct meaning</div>
              <div
                style={{
                  fontSize: '2rem',
                  width: '55vw',
                  height: '40vw',

                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  border: '1px solid black',
                  borderRadius: '1rem',

                  marginTop: '2rem'
                }}
              >
                <div style={{ margin: '2rem' }}>鍵盤</div>
              </div>
            </div>
            <div
              style={{
                marginTop: '2rem',
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'wrap',
                justifyContent: 'space-around',
                rowGap: '1rem'
              }}
            >
              <div>
                <IonButton fill='outline' style={{ width: '33vw', height: '33vw' }}>
                  Keyboard
                </IonButton>
              </div>
              <div>
                <IonButton fill='outline' style={{ width: '33vw', height: '33vw' }}>
                  Monitor
                </IonButton>
              </div>
              <div>
                <IonButton fill='outline' style={{ width: '33vw', height: '33vw' }}>
                  Mouse
                </IonButton>
              </div>
              <div>
                <IonButton fill='outline' style={{ width: '33vw', height: '33vw' }}>
                  Speaker
                </IonButton>
              </div>
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default MatchingFrenzySelectCategory;
