import type { ComponentProps, Ref } from 'react';
import { useState } from 'react';
import { Icon } from '@/components/ui/icon';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

export default function PasswordInput({
    className,
    ref,
    showPasswordAriaLabel = 'Show password',
    hidePasswordAriaLabel = 'Hide password',
    ...props
}: Omit<ComponentProps<'input'>, 'type'> & {
    ref?: Ref<HTMLInputElement>;
    showPasswordAriaLabel?: string;
    hidePasswordAriaLabel?: string;
}) {
    const [showPassword, setShowPassword] = useState(false);

    return (
        <div className="relative">
            <Input
                type={showPassword ? 'text' : 'password'}
                className={cn('pr-10', className)}
                ref={ref}
                {...props}
            />
            <button
                type="button"
                onClick={() => setShowPassword((prev) => !prev)}
                className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none"
                aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}
                tabIndex={-1}
            >
                {showPassword ? (
                    <Icon icon="solar:eye-closed-bold-duotone" className="size-4" />
                ) : (
                    <Icon icon="solar:eye-bold-duotone" className="size-4" />
                )}
            </button>
        </div>
    );
}