import ShowPasswordButton from '@/Components/ShowPasswordButton';
import TextInput from '@/Components/TextInput';
import { InputHTMLAttributes, useState } from 'react';

export default function PasswordInput({
    ...props
}: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean }) {
    const [showPassword, setShowPassword] = useState(false);
    const type = showPassword ? 'text' : 'password';
    return (
        <TextInput
            {...props}
            type={type}
            endIcon={
                <ShowPasswordButton
                    visible={showPassword}
                    className="absolute right-0 top-1 m-1 size-8"
                    setShowPassword={setShowPassword}
                />
            }
        />
    );
}