import { Eye, EyeOff } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

import { Input } from '@/components/ui/input';

type AuthFieldProps = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  icon: LucideIcon;
  type?: 'email' | 'password' | 'text';
  placeholder?: string;
  required?: boolean;
  minLength?: number;
  showPassword?: boolean;
  onTogglePassword?: () => void;
};

export function AuthField({
  label,
  value,
  onChange,
  icon: Icon,
  type = 'text',
  placeholder,
  required = false,
  minLength,
  showPassword = false,
  onTogglePassword,
}: AuthFieldProps) {
  const inputType = type === 'password' && showPassword ? 'text' : type;

  return (
    <div>
      <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">
        {label}
      </label>
      <div className="relative">
        <Icon size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
        <Input
          type={inputType}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          className={`w-full pl-10 ${onTogglePassword ? 'pr-10' : 'pr-4'} py-2.5 bg-slate-800/80 border border-slate-700/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 outline-none transition-all`}
          required={required}
          minLength={minLength}
        />
        {onTogglePassword && (
          <button
            type="button"
            onClick={onTogglePassword}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
          </button>
        )}
      </div>
    </div>
  );
}
