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

export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  hint?: string;
  fullWidth?: boolean;
}

export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ 
  label, 
  error, 
  hint, 
  fullWidth = false,
  ...props 
}, ref) => {
  const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors p-3 text-sm min-h-[100px]';
  const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
  const widthClasses = fullWidth ? 'w-full' : '';

  const classes = [
    baseClasses,
    errorClasses,
    widthClasses,
  ].filter(Boolean).join(' ');

  return (
    <Box width={fullWidth ? '100%' : undefined}>
      {label && (
        <Box marginBottom={1.5}>
          <Text as="label" size="xs" weight="bold" variant="low">
            {label}
          </Text>
        </Box>
      )}
      <textarea
        ref={ref}
        className={classes}
        {...props}
      />
      {error && (
        <Box marginTop={1}>
          <Text size="xs" variant="critical">
            {error}
          </Text>
        </Box>
      )}
      {hint && !error && (
        <Box marginTop={1}>
          <Text size="xs" variant="low">
            {hint}
          </Text>
        </Box>
      )}
    </Box>
  );
});

TextArea.displayName = 'TextArea';