import { forwardRef } from 'react';
import { Text } from './Text';
import { Box } from './Box';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  variant?: 'default' | 'error';
  errorMessage?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className = '', variant = 'default', errorMessage, ...props }, ref) => {
    const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
    const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
    const classes = `${baseClasses} ${variantClasses} ${className}`;

    return (
      <Box fullWidth>
        <input ref={ref} className={classes} {...props} />
        {errorMessage && (
          <Text size="xs" color="text-error-red" block mt={1}>
            {errorMessage}
          </Text>
        )}
      </Box>
    );
  }
);

Input.displayName = 'Input';