"use client";
import { Input } from "@nextui-org/input";
import React from "react";
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
import { Button } from "@nextui-org/button";
import Link from "next/link";

export default function Login() {
  const [isVisible, setIsVisible] = React.useState(false);

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

  return (
    <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
      <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
        <div className="text-xl font-bold">
          Selamat Datang di Portal Resmi Humas Polri
        </div>
        <div>
          <Input
            classNames={{
              input: ["w-full", "bg-transparent", "!text-black"],
              mainWrapper: ["w-full", "bg-transparent"],
              innerWrapper: ["bg-transparent"],
              label: ["!text-black", "font-semibold"],
              inputWrapper: [
                "bg-transparent",
                "dark:bg-transparent",
                "hover:bg-transparent",
                "dark:hover:bg-transparent",
                "group-data-[focused=true]:bg-transparent",
                "dark:group-data-[focused=true]:bg-transaparent",
                "group-data-[focused=false]:bg-transparent",
                "focus-within:!bg-transparent",
              ],
            }}
            isRequired
            type="text"
            label="Username"
            placeholder="Masukkan username anda!"
            variant="underlined"
          />
        </div>
        <div>
          <Input
            classNames={{
              input: ["w-full", "bg-transparent", "!text-black"],
              mainWrapper: ["w-full", "bg-transparent"],
              innerWrapper: ["bg-transparent"],
              label: ["!text-black", "font-semibold"],
              inputWrapper: [
                "bg-transparent",
                "dark:bg-transparent",
                "hover:bg-transparent",
                "dark:hover:bg-transparent",
                "group-data-[focused=true]:bg-transparent",
                "dark:group-data-[focused=true]:bg-transaparent",
                "group-data-[focused=false]:bg-transparent",
                "focus-within:!bg-transparent",
              ],
            }}
            isRequired
            endContent={
              <button
                className="focus:outline-none"
                type="button"
                onClick={toggleVisibility}
              >
                {isVisible ? (
                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                ) : (
                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                )}
              </button>
            }
            type={isVisible ? "text" : "password"}
            label="Password"
            placeholder="Masukkan password anda"
            variant="underlined"
          />
        </div>
        <div>
          <Input
            classNames={{
              input: ["w-full", "bg-transparent", "!text-black"],
              mainWrapper: ["w-full", "bg-transparent"],
              innerWrapper: ["bg-transparent"],
              label: ["!text-black", "font-semibold"],
              inputWrapper: [
                "bg-transparent",
                "dark:bg-transparent",
                "hover:bg-transparent",
                "dark:hover:bg-transparent",
                "group-data-[focused=true]:bg-transparent",
                "dark:group-data-[focused=true]:bg-transaparent",
                "group-data-[focused=false]:bg-transparent",
                "focus-within:!bg-transparent",
              ],
            }}
            isRequired
            endContent={
              <button
                className="focus:outline-none"
                type="button"
                onClick={toggleVisibility}
              >
                {isVisible ? (
                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                ) : (
                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                )}
              </button>
            }
            type={isVisible ? "text" : "password"}
            label="Konfirmasi Password"
            placeholder="Masukkan password anda"
            variant="underlined"
          />
        </div>
        <div>
          <Button
            size="lg"
            className="w-full bg-[#DD8306] rounded-md font-semibold"
          >
            Login
          </Button>
        </div>
        <div className="flex justify-center text-xs font-medium  py-3">
          Don&apos;t have account? Register Now
        </div>
        <div>
          <Link href={`/form-permohonan-informasi`}>
            <Button
              size="lg"
              variant="bordered"
              className="w-full text-[#DD8306] borde-2 border-[#DD8306]  rounded-md font-semibold"
            >
              Register
            </Button>
          </Link>
        </div>
      </div>
      <div className="hidden sm:flex w-1/2   items-center justify-center p-10">
        <img src="/login.png" alt="logo" />
      </div>
    </div>
  );
}