import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Lock, EyeOff, Eye } from "lucide-react"        
            
function InputPassword(){

const [showPassword, setShowPassword] = useState(false)
const [password, setPassword] = useState("")

const togglePasswordVisibility = () => {
        setShowPassword(!showPassword)
    }

    return(
        <>
            <div className="relative w-full">
                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <Lock className="h-4 w-4 text-gray-500" />
                </div>
                <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Enter your password"
                    className="pl-10 pr-10 h-12 rounded-xl bg-zinc-800/20 border-zinc-800/20 hover:border-zinc-800 hover:bg-zinc-800/60 transition-all duration-500"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <div className="pr-2">
                    <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="absolute inset-y-1.5 pr-2 right-0 flex items-center justify-center hover:bg-transparent text-gray-500 hover:text-white"
                        onClick={togglePasswordVisibility}
                        aria-label={showPassword ? "Hide password" : "Show password"}
                    >
                        {showPassword ? <EyeOff className="h-4 w-4 " /> : <Eye className="h-4 w-4 " />}
                    </Button>
                </div>
            </div>
        </>
    )
}
export default InputPassword