/**
 * Input Component
 * 
 * Accessible form input with validation states
 */

import { type InputHTMLAttributes, forwardRef } from 'react';

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ error = false, label, className = '', id, ...props }, ref) => {
    const baseStyles =
      'w-full rounded-xl border bg-surface px-4 py-2.5 text-sm text-ink placeholder:text-muted transition-all duration-200 outline-none';
    const normalStyles = 'border-border focus:border-brand-400 focus:ring-4 focus:ring-brand-100';
    const errorStyles = 'border-error ring-4 ring-red-50';

    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');

    return (
      <div className="w-full">
        {label && (
          <label htmlFor={inputId} className="block text-sm font-medium text-ink mb-1.5">
            {label}
          </label>
        )}
        <input
          ref={ref}
          id={inputId}
          className={`${baseStyles} ${error ? errorStyles : normalStyles} ${className}`}
          {...props}
        />
      </div>
    );
  }
);

Input.displayName = 'Input';