import { type InputHTMLAttributes } from "react";

interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}

export function InputField({
  label,
  error,
  id,
  name,
  className = "",
  ...rest
}: InputFieldProps) {
  const fieldId = id ?? name;
  return (
    <div className="space-y-1">
      <label htmlFor={fieldId} className="block text-sm font-medium text-text-primary">
        {label}
      </label>
      <input
        id={fieldId}
        name={name}
        {...rest}
        className={`h-10 w-full rounded-sm border px-3 text-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-bg disabled:opacity-60 ${
          error ? "border-error" : "border-border"
        } ${className}`}
      />
      {error && <p className="text-xs text-error">{error}</p>}
    </div>
  );
}