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

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

export function TextArea({
  label,
  errorMessage,
  variant = 'default',
  fullWidth = true,
  className = '',
  ...props
}: TextAreaProps) {
  const isError = variant === 'error' || !!errorMessage;

  return (
    <Stack gap={1.5} fullWidth={fullWidth}>
      {label && (
        <Text as="label" size="sm" weight="medium" color="text-gray-300">
          {label}
        </Text>
      )}
      <Box position="relative" fullWidth={fullWidth}>
        <Box
          as="textarea"
          fullWidth={fullWidth}
          p={3}
          rounded="md"
          bg="bg-iron-gray"
          color="text-white"
          border
          style={{
            borderColor: isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)',
            resize: 'none',
          }}
          className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
          {...props}
        />
      </Box>
      {errorMessage && (
        <Text size="xs" color="text-warning-amber">
          {errorMessage}
        </Text>
      )}
    </Stack>
  );
}