import { EyeIcon, EyeOffIcon } from "lucide-react"
import React from "react"
import { Button } from "../ui/button"
import { Input } from "../ui/input"

export function PasswordInput(props: React.ComponentProps<"input">) {
    const [showPassword, setShowPassword] = React.useState(false)
    const disabled = props.value === '' || props.value === undefined || props.disabled

    return (
        <div className="relative">
            <Input type={showPassword ? "text" : "password"} {...props} />
            <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword((prev) => !prev)}
                disabled={disabled}
            >
                {showPassword && !disabled ? (
                    <EyeIcon className="h-4 w-4" aria-hidden="true" />
                ) : (
                    <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
                )}
                <span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
            </Button>
            <style>
                {`
					.hide-password-toggle::-ms-reveal,
					.hide-password-toggle::-ms-clear {
						visibility: hidden;
						pointer-events: none;
						display: none;
					}
				`}
            </style>
        </div>
    )
}