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 MatchingFrenzyMatchResult() {
  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: 'column', alignItems: 'center' }}>
              <div style={{ width: '50vw', height: '50vw' }}>
                <HelloworldImage />
              </div>
              <div style={{ fontSize: '1.3rem', textDecoration: 'underline', marginTop: '1rem' }}>
                <div>{'Technology'}</div>
              </div>
              <div style={{ fontSize: '2rem', marginTop: '1rem' }}>
                <div>Well Done</div>
              </div>
              <div style={{ marginTop: '0.5rem' }}>
                <div>
                  {'Matches made:'}
                  {'20'}
                </div>
              </div>
              <div>
                <div style={{ width: '50vw', marginTop: '1rem' }}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      justifyContent: 'center',
                      alignItems: 'center',
                      padding: '1rem',
                      backgroundColor: 'green',
                      color: 'white'
                    }}
                  >
                    Scoreboard
                  </div>
                  {Array.from({ length: 3 }).map((_, i) => (
                    <div
                      key={i}
                      style={{
                        padding: '0.5rem',
                        display: 'flex',
                        justifyContent: 'space-between',
                        borderLeft: '1px solid grey',
                        borderRight: '1px solid grey',
                        borderBottom: '1px solid grey'
                      }}
                    >
                      <div>{`day${i + 1}`}</div>
                      <div>{i * 10 + 12}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default MatchingFrenzyMatchResult;
