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

interface InputProps extends 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-sm text-white bg-graphite-black focus:outline-none focus:border-primary-accent transition-all duration-150 ease-smooth w-full text-sm placeholder:text-gray-600';
    const variantClasses = (variant === 'error' || errorMessage) ? 'border-critical-red' : 'border-border-gray';
    const iconClasses = icon ? 'pl-10' : '';
    const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;

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

Input.displayName = 'Input';