import type { InputHTMLAttributes } from 'react';

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

export function Input({ label, error, hint, className = '', id, ...props }: InputProps) {
  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, '-');
  return (
    <div className="flex flex-col gap-1">
      {label && (
        <label htmlFor={inputId} className="text-sm font-medium text-[var(--color-neutral-700)]">
          {label}
        </label>
      )}
      <input
        {...props} id={inputId}
        className={[
          'w-full rounded-[var(--radius-md)] border px-3 py-2 text-sm transition-colors',
          'placeholder:text-[var(--color-neutral-400)]',
          'focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-500)] focus:border-transparent',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          error
            ? 'border-[var(--color-error)] bg-[var(--color-error-light)]'
            : 'border-[var(--color-neutral-300)] bg-white',
          className,
        ].join(' ')}
      />
      {error && <p className="text-xs text-[var(--color-error)]">{error}</p>}
      {hint && !error && <p className="text-xs text-[var(--color-neutral-500)]">{hint}</p>}
    </div>
  );
}
