import { useState } from "react";
import Button from "../../Base/button";
import Input from "../../Base/input";
import Layout from "../../Base/layout";
import "./login.css";

function Login({ onSubmit }) {
  const [mobile, setMobile] = useState("");
  const [password, setPassword] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ mobile, password });
    setMobile("");
    setPassword("");
  };

  return (
    <Layout title="Login">
      <form onSubmit={handleSubmit}>
        <label>Mobile:</label>
        <Input
          placeholder="Enter Mobile"
          type="text"
          required
          onKeyPress={(event) => {
            if (!/[0-9]/.test(event.key)) {
              event.preventDefault();
            }
          }}
          maxLength={10}
          onChange={(e) => setMobile(e.target.value)}
        />
        <label>Password:</label>
        <Input
          placeholder="Enter Password"
          required
          type="text"
        maxLength={8}
          onChange={(e) => setPassword(e.target.value)}
        />
        <Button>Submit</Button>
      </form>
    </Layout>
  );
}

export default Login;
