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

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, icon, errorMessage, variant = 'default', className = '', ...props }, ref) => {
    const isError = variant === 'error' || !!errorMessage;
    
    const baseClasses = 'w-full px-4 py-2 bg-deep-graphite border rounded-lg text-white placeholder:text-gray-500 focus:outline-none transition-all duration-150 sm:text-sm';
    const variantClasses = isError 
      ? 'border-warning-amber focus:border-warning-amber focus:ring-1 focus:ring-warning-amber' 
      : 'border-charcoal-outline focus:border-primary-blue focus:ring-1 focus:ring-primary-blue';
    
    const classes = `${baseClasses} ${variantClasses} ${icon ? 'pl-11' : ''} ${className}`;

    return (
      <Stack gap={1.5} fullWidth>
        {label && (
          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
            {label}
          </Text>
        )}
        <Box fullWidth position="relative">
          {icon && (
            <Box 
              position="absolute" 
              left={0} 
              top="50%" 
              translateY="-50%" 
              zIndex={10} 
              w="11" 
              display="flex" 
              center 
              color="text-gray-500"
            >
              {icon}
            </Box>
          )}
          <input ref={ref} className={classes} {...props} />
          {errorMessage && (
            <Text size="xs" color="text-warning-amber" mt={1}>
              {errorMessage}
            </Text>
          )}
        </Box>
      </Stack>
    );
  }
);

Input.displayName = 'Input';