import PropTypes from 'prop-types';
import Input from '@Base/Input/Index';
import Button from '@Base/Button/Index';
import styles from './styles.module.css';
import { useState } from 'react';

const Login = ({ onSubmit }) => {
  const [isLoading, setIsLoading] = useState(false);
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = { ...Object.fromEntries(formData) };
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (regex.test(data.email)) {
      setIsLoading(true);
      setTimeout(() => {
        setIsLoading(false);
        onSubmit(data?.email);
      }, 1000);
    } else {
      return;
    }
  };

  return (
    <div className={styles.bg}>
      <section className={styles.container}>
        <div className={styles.contentWrapper}>
          <div className={styles.title}>Welcome Back!</div>
          <div className={styles.desc}>
            Login with email and passoword to book seats.
          </div>
        </div>
        <form className={styles.formWrapper} onSubmit={handleSubmit}>
          <Input
            label="Email"
            name="email"
            type="email"
            placeholder="Enter email"
          />
          <Button size={'md'} loading={isLoading}>
            Confirm
          </Button>
        </form>
      </section>
    </div>
  );
};

export default Login;

Login.propTypes = {
  onSubmit: PropTypes.func.isRequired
};
