import React, { InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  disabled?: boolean;
  size?: 'small' | 'middle' | 'large';
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  className?: string;
}

export const Input: React.FC<InputProps> = ({
  label,
  error,
  disabled = false,
  size = 'middle',
  prefix,
  suffix,
  className = '',
  ...rest
}) => {
  const getSizeClass = () => {
    switch (size) {
      case 'small':
        return 'h-8 text-sm';
      case 'large':
        return 'h-12 text-lg';
      case 'middle':
      default:
        return 'h-10';
    }
  };

  return (
    <div className="w-full">
      {label && (
        <label className="block text-sm font-medium text-gray-700 mb-1">
          {label}
        </label>
      )}
      <div className="relative">
        {prefix && (
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
            {prefix}
          </div>
        )}
        <input
          className={`
            w-full
            ${getSizeClass()}
            px-3
            py-2
            border
            rounded-md
            shadow-sm
            focus:outline-none
            focus:ring-2
            focus:ring-blue-500
            focus:border-transparent
            ${prefix ? 'pl-10' : 'pl-3'}
            ${suffix ? 'pr-10' : 'pr-3'}
            ${disabled ? 'bg-gray-100 border-gray-300 cursor-not-allowed' : 'bg-white border-gray-300'}
            ${error ? 'border-red-500' : ''}
            ${className}
          `}
          disabled={disabled}
          {...rest}
        />
        {suffix && (
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-500">
            {suffix}
          </div>
        )}
      </div>
      {error && (
        <p className="mt-1 text-sm text-red-600">{error}</p>
      )}
    </div>
  );
};

export default Input;