import { IonButton } from '@ionic/react';
import { PRESS_START_TO_BEGIN, PRESS_START_TO_BEGIN_MESSAGE } from '../../constants';

interface ContainerProps {
  processStartMatch: () => void;
}

function PressStartToBegin({ processStartMatch }: ContainerProps) {
  return (
    <>
      <div
        style={{
          height: '90vh',
          width: '100%',
          display: 'inline-flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          gap: '0.5rem'
        }}
      >
        <div style={{ fontSize: '3rem' }}>🎬</div>
        <div style={{ marginTop: '1rem' }}>{PRESS_START_TO_BEGIN_MESSAGE}</div>
        <div>{PRESS_START_TO_BEGIN}</div>
        <div style={{ marginTop: '1rem' }}>
          <IonButton fill='outline' color='dark' onClick={() => processStartMatch()} size='large'>
            {'start'}
          </IonButton>
        </div>
      </div>
    </>
  );
}

export default PressStartToBegin;
