import React, { useState } from "react";
import { Header } from "../../Layout/Card/Header";
import { Input } from "../../Form/form/Input";
import { Button } from "../../Form/Button/Button";
import styles from "./Login.module.css";
import { toast, ToastContainer } from "react-toastify";
import Home from "../../../Assets/Login.png";
import { Link } from "react-router-dom";
import { Sign } from "../SignUp/Sign";

export const Login = ({ onClick, onSwitch }) => {
  const [value, setValue] = useState("");
  const [islesser, setIsLesser] = useState(false);

  const InputChange = (e) => {
    setValue(e.target.value);
  };

  const HandleButton = (e) => {
    e.preventDefault();

    if (value.length < 10) {
      setIsLesser(true);
      toast.error("Mobile Number is less than 10");
    } else {
      console.log("onClick prop:", onClick);
      onClick({ mobile: value });
      setIsLesser(false);
      setValue("");
    }
  };

  return (
    <>
      <div className={styles.container}>
        <div className={`${styles.back} ${styles.round}`}>
          <Header title="Login Page" Color="#000" className={styles.head} />
          <img src={Home} className={styles.img} />
          <div className={styles.form}>
            <div className={styles.inp}>
              <Input
                placeholder="Enter Your Number"
                type="text"
                value={value}
                onChange={InputChange}
                required
              />
            </div>
            {islesser && (
              <span className={styles.span}>Please enter 10 digits</span>
            )}
            <div className={styles.btn}>
              <Button
                children="Submit"
                onClick={HandleButton}
                disabled={value.trim().length === 0}
              />
              <div className={styles.foot}>
                Don't have an account?{" "}
                <span
                  style={{ color: "blue", cursor: "pointer" }}
                  onClick={onSwitch}
                >
                  Sign Up
                </span>
              </div>
            </div>
          </div>
        </div>
        <ToastContainer />
      </div>
    </>
  );
};
