import { InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  /** Texto fijo grisado antes del campo (ej: el prefijo de país del teléfono). */
  prefijo?: string;
  ayuda?: string;
}

export default function Input({ label, error, prefijo, ayuda, className = "", id, ...props }: InputProps) {
  const estiloInput = `border rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition bg-gray-100 text-gray-900 placeholder-gray-500 ${
    error ? "border-red-400" : "border-gray-400"
  } ${className}`;

  return (
    <div className="flex flex-col gap-1">
      {label && (
        <label htmlFor={id} className="text-sm font-medium text-gray-700">
          {label}
        </label>
      )}
      {prefijo ? (
        <div
          className={`flex items-center rounded-lg border bg-gray-100 focus-within:ring-2 focus-within:ring-blue-500 transition ${
            error ? "border-red-400" : "border-gray-400"
          }`}
        >
          <span className="pl-3 pr-1 text-sm text-gray-500 select-none">{prefijo}</span>
          <input
            id={id}
            className={`flex-1 bg-transparent px-1 py-2 text-sm outline-none text-gray-900 placeholder-gray-500 ${className}`}
            {...props}
          />
        </div>
      ) : (
        <input id={id} className={estiloInput} {...props} />
      )}
      {ayuda && !error && <p className="text-xs text-gray-500">{ayuda}</p>}
      {error && <p className="text-xs text-red-500">{error}</p>}
    </div>
  );
}