import {Eye, EyeOff} from "lucide-react";
import {useState} from "react";
import {defaultIconSize} from "./SvgIcon";
import clsx from "clsx";

type PasswordFieldProps = {
    onPasswordChanged: (password: string) => void
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
    className?: string
}

/**
 * Password field component
 */
export default function PasswordField({onPasswordChanged, onKeyDown, className = ""}: PasswordFieldProps) {
    const [showPassword, setShowPassword] = useState(false);
    const [password, setPassword] = useState<string>("");

    const changePassword = (password: string) => {
        setPassword(password);
        onPasswordChanged(password)
    }
    return (
        <div className={clsx(
            "relative",
            className)}>
            <input
                className="pr-10"
                type={showPassword ? "text" : "password"}
                placeholder="Passwort"
                value={password}
                onChange={(e) => changePassword(e.target.value)}
                onKeyDown={onKeyDown}
            />
            {/* Add a little eye icon to the right for showing password */}
            <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
            >
                {showPassword ? <EyeOff size={defaultIconSize}/> : <Eye size={defaultIconSize}/>}
            </button>
        </div>
    );
}