import React from 'react';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  helperText?: string;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, helperText, className = '', id, ...props }, ref) => {
    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;

    return (
      <div className="flex flex-col w-full gap-1">
        {label && (
          <label htmlFor={inputId} className="text-sm font-medium text-gray-700 select-none">
            {label}
          </label>
        )}
        <input
          ref={ref}
          id={inputId}
          className={`
            w-full px-3 py-2 border rounded-lg shadow-sm text-base transition-colors
            focus:outline-none focus:ring-2 focus:ring-brand-primary focus:border-brand-primary
            disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200
            ${error ? 'border-status-error focus:ring-status-error focus:border-status-error' : 'border-gray-300'}
            ${className}
          `}
          {...props}
        />
        {error && (
          <span className="text-sm text-status-error font-medium">
            {error}
          </span>
        )}
        {!error && helperText && (
          <span className="text-sm text-gray-500">
            {helperText}
          </span>
        )}
      </div>
    );
  }
);

Input.displayName = 'Input';

export default Input;