import React from 'react';
import styled from 'styled-components';
import { PageTitle } from '../../../components/common/texts/Title';

const EmailVerification = ({ user }) => {
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      MainWrap,
      {
        className: '',
      },
      /*#__PURE__*/ React.createElement('img', {
        src: '/images/email-verification.png',
        alt: 'message icon',
      }),
      /*#__PURE__*/ React.createElement(PageTitle, {
        title: 'Check your email address verification',
      }),
      /*#__PURE__*/ React.createElement(
        'p',
        {
          className: 'auth-info',
        },
        'We\u2019ve sent a verification link to',
        /*#__PURE__*/ React.createElement(
          'span',
          {
            style: {
              fontFamily: 'var(--ff-medium)',
            },
          },
          ' ',
          user?.email
        )
      ),
      /*#__PURE__*/ React.createElement(
        'p',
        {
          className: 'd-flx-alc text-icon',
        },
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: '/images/icons.svg#envelope',
          })
        )
      )
    )
  );
};

export default EmailVerification;
const MainWrap = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 4rem 0;
  img {
    width: 200px;
    height: 100px;
  }
  h1,
  p {
    text-align: center;
  }
  .text-icon {
    margin-top: 3rem;
    svg {
      color: var(--co-primary);
      width: 24px;
      height: 24px;
    }
    span {
      margin-left: 1rem;
      font-family: var(--ff-sbold);
      font-weight: 600;
      letter-spacing: 0.2px;
      font-size: 14px;
      line-height: 17px;
    }
  }
`;
