import { Eye, EyeSlash } from "iconsax-react"
import React, { FC, useState } from "react"
import { Input as InputComponent } from '@headlessui/react'

type Props = {
    type?: React.HTMLInputTypeAttribute,
    placeholder: string,
    icon?: React.ReactNode,
    field?: any
}

export const Input: FC<Props> = ({ placeholder, type = "text", icon, field }) => {
    const [hidden, setHidden] = useState<boolean>(false)
    const handleHidden = () => setHidden(prev => !prev)
    return (
        <div className={`relative w-full`}>
            <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
                {type === "password" ?
                    !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                    : icon}
            </div>
            <InputComponent {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
        </div>
    )
}