import './emailAddress.scss';

import React from 'react';

import ImageIcon from '../../../components/ImageIcon/imageIcon';
import Modal from '../../../components/Modal';
import Input from '../../../components/Input';
import Button from '../../../components/Button/button';

interface Props {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
}

const EmailAddress: React.FC<Props> = (props) => {
  const { visible, toggleVisible } = props;
  return (
    <Modal visible={visible} className="emailAddress">
      <div>
        <div className="nav-area">
          <div className="nav-container">
            <ImageIcon
              src="iconHalfsheetBack"
              onClick={() => toggleVisible(false)}
              className="back-icon"
            />
            <div className="email-label">メールアドレスの登録</div>
          </div>
          <div className="divider" />
          <div className="email-container">
            <ImageIcon src="icon-email" type="svg" />
            <div className="discription-first">パスワードを忘れた際に</div>
            <div className="discription-second">
              メールアドレスを利用して解決できます
            </div>
            <div className="discription-hint">
              登録後、確認メールが送信されます
            </div>
          </div>
          <div className="input-container">
            <Input />
          </div>
          <div className="submit-area">
            <Button onClick={() => toggleVisible(false)} btnType="primary">
              メールアドレスを登録する
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default EmailAddress;