import React from 'react';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  fullWidth?: boolean;
  rightIcon?: React.ReactNode;
  onRightIconClick?: () => void;
}

const Input: React.FC<InputProps> = ({ 
  label, 
  error, 
  fullWidth = true, 
  className = '', 
  rightIcon,
  onRightIconClick,
  id,
  ...props 
}) => {
  const inputId = id || props.name || Math.random().toString(36).substr(2, 9);

  return (
    <div className={`${fullWidth ? 'w-full' : ''} ${className}`}>
      {label && (
        <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          {label}
        </label>
      )}
      <div className="relative">
        <input
          id={inputId}
          className={`
            block w-full rounded-md border shadow-sm px-3 py-2 sm:text-sm transition-colors
            bg-white dark:bg-slate-700 text-slate-900 dark:text-white
            focus:outline-none focus:ring-2 focus:ring-offset-0
            ${error 
              ? 'border-red-300 focus:border-red-500 focus:ring-red-500' 
              : 'border-slate-300 dark:border-slate-600 focus:border-blue-500 focus:ring-blue-500'
            }
            ${rightIcon ? 'pr-10' : ''}
            disabled:bg-slate-100 dark:disabled:bg-slate-800 disabled:text-slate-500
          `}
          {...props}
        />
        {rightIcon && (
          <div 
            className={`absolute inset-y-0 right-0 flex items-center pr-3 ${onRightIconClick ? 'cursor-pointer hover:text-slate-600 dark:hover:text-slate-300' : 'pointer-events-none'} text-slate-400`}
            onClick={onRightIconClick}
          >
            {rightIcon}
          </div>
        )}
      </div>
      {error && <p className="mt-1 text-xs text-red-600 dark:text-red-400">{error}</p>}
    </div>
  );
};

export default Input;