import type { LucideIcon } from 'lucide-react';

interface Props {
  label: string;
  name: string;
  type: string;
  icon: LucideIcon;
  placeholder: string;
  showEye?: boolean;
  toggleEye?: () => void;
  eyeIcon?: LucideIcon;
  // --- TAMBAHKAN DUA INI ---
  value: string; 
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function LoginInput({ 
  label, name, type, icon: Icon, placeholder, showEye, toggleEye, eyeIcon: EyeIcon,
  value, onChange // <--- Terima props di sini
}: Props) {
  return (
    <div className="mb-4">
      <label className="block text-gray-400 text-sm mb-1">{label}:</label>
      <div className="relative group">
        <div className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 group-focus-within:text-[#4A90E2]">
          <Icon size={20} />
        </div>
        <input 
          name={name}
          type={type}
          placeholder={placeholder}
          // --- PASANG DI SINI ---
          value={value}
          onChange={onChange}
          className="w-full bg-[#3D444D] border border-gray-600 rounded-lg pl-11 pr-10 py-3 text-white focus:outline-none focus:border-[#4A90E2] transition-all placeholder:text-gray-500"
        />
        {showEye && toggleEye && EyeIcon && (
          <button type="button" onClick={toggleEye} className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-white">
            <EyeIcon size={20} />
          </button>
        )}
      </div>
    </div>
  );
}