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

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className = '', variant = 'default', errorMessage, icon, label, ...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 iconClasses = icon ? 'pl-10' : '';
    const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;

    return (
      <Stack gap={1.5} fullWidth>
        {label && (
          <Text as="label" size="sm" weight="medium" color="text-gray-300">
            {label}
          </Text>
        )}
        <Box fullWidth position="relative">
          {icon && (
            <Box 
              position="absolute" 
              left="3" 
              top="50%" 
              style={{ transform: 'translateY(-50%)' }}
              zIndex={10}
              display="flex"
              center
            >
              {icon}
            </Box>
          )}
          <input ref={ref} className={classes} {...props} />
          {errorMessage && (
            <Text size="xs" color="text-error-red" block mt={1}>
              {errorMessage}
            </Text>
          )}
        </Box>
      </Stack>
    );
  }
);

Input.displayName = 'Input';