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

const EmailVerification = ({ user }) => {
  return (
    <>
      <MainWrap className="">
        <img src="/images/email-verification.png" alt="message icon" />
        <PageTitle title="Check your email address verification" />
        <p className="auth-info">
          We’ve sent a verification link to
          <span style={{ fontFamily: 'var(--ff-medium)' }}> {user?.email}</span>
        </p>
        <p className="d-flx-alc text-icon">
          <svg>
            <use href="/images/icons.svg#envelope"></use>
          </svg>
          {/* <a href={`mailto:${user?.email}`}>
            <span>Open Email App</span>
          </a> */}
        </p>
      </MainWrap>
    </>
  );
};

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;
    }
  }
`;
