/**
 * Reusable Input component.
 * Meets minimum 44×44px touch target requirement (Req 13.2).
 * Accessible: label linked to input via htmlFor/id.
 */

/**
 * @param {{
 *   label?: string,
 *   error?: string,
 *   id?: string,
 *   type?: string,
 *   className?: string,
 * }} props
 */
export default function Input({
  label,
  error,
  id,
  type = 'text',
  className = '',
  ...rest
}) {
  return (
    <div className="flex flex-col gap-1">
      {label && (
        <label
          htmlFor={id}
          className="text-sm font-medium text-secondary"
        >
          {label}
        </label>
      )}
      <input
        id={id}
        type={type}
        aria-describedby={error && id ? `${id}-error` : undefined}
        aria-invalid={error ? 'true' : undefined}
        className={[
          'w-full rounded-md border px-3 py-2 text-base text-secondary',
          'min-h-[44px]',
          'placeholder:text-secondary-400',
          'transition-colors',
          'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
          error
            ? 'border-red-500 bg-red-50 focus:ring-red-500'
            : 'border-secondary-200 bg-white hover:border-secondary-400',
          'disabled:cursor-not-allowed disabled:bg-secondary-100 disabled:opacity-60',
          className,
        ]
          .filter(Boolean)
          .join(' ')}
        {...rest}
      />
      {error && (
        <p
          id={id ? `${id}-error` : undefined}
          role="alert"
          className="text-sm text-red-600"
        >
          {error}
        </p>
      )}
    </div>
  );
}