"use client";

import React from "react";
import { useFormState } from "react-dom";
import { login } from "./action";
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Divider,
  Input,
} from "@nextui-org/react";

import { FaRegEye } from "react-icons/fa";
import { FaRegEyeSlash } from "react-icons/fa";


export function LoginPassword(props: any) {
  const [isVisible, setIsVisible] = React.useState(false);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return (
    <Input
      name="password"
      id=""
      label="Password"
      variant="bordered"
      placeholder="Enter your password"
      className="max-w-xs"
    />
  );
}

export function LoginEmail() {
  return (
    <Input
      name="email"
      id=""
      label="Email"
      type="email"
      className="max-w-xs"
    />
  );
}

export default function Page() {
  const initState = {
    message: "",
  };

  const [state, formAction] = useFormState(login, initState);

  return (
    <>
        <form action={formAction}>
          <Card className="max-w-[400px] bg-white">
            <CardHeader className="flex gap-3">
                <p className="text-xl">Welcome</p>
            </CardHeader>
            <Divider />
            <CardBody>
              <div className="py-2">
                <LoginEmail />
              </div>
              <div className="py-2">
                <LoginPassword />
              </div>
            </CardBody>
            <Divider />
            <CardFooter>
              <div className="flex flex-col items-center">
                <Button
                  radius="full"
                >
                  Login
                </Button>
                <div> Message : {state?.message}</div>
              </div>
            </CardFooter>
          </Card>
        </form>
    </>