"use client";
import styles from "./css/inputs.module.css";
import React, { useState } from "react";
import { signIn, useOTP } from "@/app/login/actions";

function Inputs() {
  const [data, setData] = useState<{ email: string }>({
    email: "",
  });
  const [error, setError] = useState(false);
  const [clicked, setClicked] = useState(false);
  const [leingt, setLeingt] = useState<boolean>();
  function handleSubmit() {
    if (!data.email.includes("@")) {
      setError(true);
    } else {
      setError(false);
    }
    setClicked(true);
  }

  return (
    <div className={styles.container} style={{ marginTop: "-20px" }}>
      <form>
        <div className={styles.container_input}>
          <label
            className={`${styles.label} ${leingt ? styles.focus : ""}`}
            htmlFor="email"
          >
            Email
          </label>
          <input
            id="email"
            name="email"
            onChange={(e) => {
              e.target.value.length <= 0 ? setLeingt(false) : setLeingt(true);
              setData({ email: e.target.value });
            }}
            className={styles.input}
            type="email"
            required
          />
        </div>
        <div
          className={styles.Verify}
          style={{ color: !error ? "#8d93a0" : "red" }}
        >
          {clicked && !error
            ? `Code sent! Copy the code and paste here`
            : clicked && error
            ? "Email must include @"
            : ""}
        </div>
        <h3>
          By continuing, you accept
          <span> Terms & Conditions </span> and
          <span> Privacy Policy</span>
        </h3>

        <button
          type="submit"
          onClick={() => handleSubmit()}
          formAction={signIn}
        >
          Get Sign-in Link
        </button>
      </form>
    </div>
  );
}

export default Inputs;