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

interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  errorMessage?: string;
  variant?: 'default' | 'error';
  fullWidth?: boolean;
}

export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
  ({ label, errorMessage, variant = 'default', fullWidth = true, className = '', ...props }, ref) => {
    const isError = variant === 'error' || !!errorMessage;
    
    return (
      <Stack gap={1.5} fullWidth={fullWidth}>
        {label && (
          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
            {label}
          </Text>
        )}
        <Box position="relative" fullWidth={fullWidth}>
          <Box
            as="textarea"
            ref={ref}
            fullWidth={fullWidth}
            p={3}
            bg="bg-deep-graphite"
            rounded="lg"
            color="text-white"
            border
            borderColor={isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)'}
            className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
            {...props}
          />
          {errorMessage && (
            <Text size="xs" color="text-warning-amber" mt={1}>
              {errorMessage}
            </Text>
          )}
        </Box>
      </Stack>
    );
  }
);

TextArea.displayName = 'TextArea';