import { IonButton, IonIcon, IonModal } from '@ionic/react';
import { useRef, useState } from 'react';
import { COLOR_TEXT } from '../../../constants';
import { closeOutline } from 'ionicons/icons';

function HelloworldModal() {
  const modal = useRef<HTMLIonModalElement>(null);
  const [opened, setOpened] = useState(true);

  return (
    <>
      <IonButton onClick={() => setOpened(true)}>Open</IonButton>
      <IonModal isOpen={opened} id='example-modal' ref={modal} trigger='open-custom-dialog'>
        <div
          style={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '1rem',
            color: COLOR_TEXT
          }}
        >
          <div>
            <h1>Congratulation!</h1>
          </div>

          <div>{'Genius'}</div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '0.25rem'
            }}
          >
            <div>You scored full</div>
            <div>marks {'1000'} times!</div>
          </div>
        </div>

        <IonButton
          color='light'
          shape='round'
          style={{ position: 'absolute', top: '5px', right: '5px' }}
          onClick={() => setOpened(false)}
        >
          <IonIcon slot='icon-only' icon={closeOutline}></IonIcon>
        </IonButton>
      </IonModal>
    </>
  );
}

export default HelloworldModal;
