'use client';

import { Button } from '@admin/components/ui/button';
import { Input } from '@admin/components/ui/input';
import { cn } from '@admin/utils/common';
import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

interface PasswordFieldProps {
    name: string;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
}

export const PasswordField = ({ name, placeholder, disabled, className }: PasswordFieldProps) => {
    const [showPassword, setShowPassword] = useState(false);
    const { control } = useFormContext();

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <div className="relative">
                    <Input
                        {...field}
                        type={showPassword ? 'text' : 'password'}
                        placeholder={placeholder}
                        disabled={disabled}
                        className={cn('pr-10', className)}
                        value={field.value || ''}
                    />
                    <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                        disabled={disabled}
                    >
                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                </div>
            )}
        />
    );
};