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

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

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

    return (
        <div className='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 PPID 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't have account? Register Now</div>
                <div>
                    <Button size='lg' variant='bordered' className="w-full text-[#DD8306] borde-2 border-[#DD8306]  rounded-md font-semibold">Register</Button>
                </div>
            </div>
            <div className='hidden sm:flex w-1/2   items-center justify-center p-10'>
                <img src="/login.png" alt="logo" />
            </div>
        </div>
    )
}