import { T9n } from 'features/T9n'

import {
  Modal,
  Wrapper,
  Header,
  HeaderTitle,
  Body,
  Footer,
  ApplyButton,
  // SendConfirmationButton,
  Text,
} from './styled'

type Props = {
  email: string,
  handleModalClose: () => void,
  isModalOpen: boolean,
}

export const RegisterPopup = (props: Props) => {
  const {
    email,
    handleModalClose,
    isModalOpen,
  } = props

  return (
    <Modal isOpen={isModalOpen} withCloseButton={false}>
      <Wrapper>
        <Header>
          <HeaderTitle>
            <T9n t='confirm_email' />
          </HeaderTitle>
        </Header>
        <Body>
          <Text>
            <T9n t='to_email' />&nbsp;
            {email}&nbsp;
            <T9n t='send_confirm' />&nbsp;
          </Text>
          <Text>
            <T9n t='confirm_2_hours' />
          </Text>
          <Text>
            <T9n t='check_email' />
          </Text>
        </Body>
        <Footer>
          <ApplyButton onClick={() => handleModalClose()}>Ok</ApplyButton>
        </Footer>
      </Wrapper>
    </Modal>
  )
}
