import { Button } from '@/Components/ui/button';
import { Eye, EyeClosed } from 'lucide-react';
import React, { ButtonHTMLAttributes } from 'react';

export default function ShowPasswordButton({
    visible = false,
    setShowPassword,
    ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & {
    visible: boolean;
    setShowPassword: (value: boolean) => void;
}) {
    const Icon = visible ? EyeClosed : Eye;

    function handleClick(e: React.MouseEvent<HTMLElement>) {
        e.preventDefault();
        if (visible) {
            setShowPassword(false);
        } else {
            setShowPassword(true);
        }
    }

    return (
        <Button variant="ghost" size="icon" onClick={handleClick} {...props}>
            <Icon />
        </Button>
    );
}