import PropTypes from 'prop-types';
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';

const Login = ({ onSubmit }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = { ...Object.fromEntries(formData) };
    onSubmit(data?.email);
  };

  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'}>Confirm</Button>
        </form>
      </section>
    </div>
  );
};

export default Login;

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