import { Eye, EyeOff } from 'lucide-react';
import type { ComponentProps } from 'react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { cn } from '@/lib/utils';

type Props = Omit<ComponentProps<'input'>, 'id' | 'name'> & {
    name: string;
    label: string;
    error?: string;
};

const inputClass =
    'h-11 w-full rounded-lg border border-navy/10 bg-gray-100 px-4 text-sm text-navy outline-none placeholder:text-gray-400 focus:border-gold focus:ring-2 focus:ring-gold/20 dark:border-white/10 dark:bg-ink-soft dark:text-white dark:placeholder:text-white/40';

export function AuthField({ name, label, error, className, ...input }: Props) {
    return (
        <div>
            <label htmlFor={name} className="text-sm font-medium">
                {label}
            </label>
            <input
                id={name}
                name={name}
                className={cn('mt-1.5', inputClass, className)}
                {...input}
            />
            <InputError message={error} className="mt-1.5" />
        </div>
    );
}

export function AuthPasswordField({
    name,
    label,
    error,
    ...input
}: Omit<Props, 'type'>) {
    const [visible, setVisible] = useState(false);

    return (
        <div>
            <label htmlFor={name} className="text-sm font-medium">
                {label}
            </label>
            <div className="relative mt-1.5">
                <input
                    id={name}
                    name={name}
                    type={visible ? 'text' : 'password'}
                    className={cn(inputClass, 'pr-12')}
                    {...input}
                />
                <button
                    type="button"
                    onClick={() => setVisible(!visible)}
                    className="absolute inset-y-0 right-0 flex items-center px-4 text-navy dark:text-white"
                    aria-label={visible ? 'Hide password' : 'Show password'}
                >
                    {visible ? (
                        <Eye className="size-4" />
                    ) : (
                        <EyeOff className="size-4" />
                    )}
                </button>
            </div>
            <InputError message={error} className="mt-1.5" />
        </div>
    );
}