import { View } from 'react-native';

import { cn } from '../../lib/cn';
import { Text } from '../../ui/text';
import { Textarea } from '../../ui/textarea';

import type { TextAreaProps } from './TextArea.types';

export function TextArea({
  label,
  helperText,
  error,
  editable = true,
  numberOfLines = 6,
  containerClassName,
  labelClassName,
  textAreaClassName,
  helperClassName,
  ...props
}: TextAreaProps) {
  return (
    <View className={cn('w-full gap-1', containerClassName)}>
      {label ? (
        <Text className={cn('text-subtitleMedium text-foreground', labelClassName)}>{label}</Text>
      ) : null}
      <Textarea
        editable={editable}
        numberOfLines={numberOfLines}
        accessibilityLabel={label}
        className={cn(
          'rounded-md',
          error && 'border-danger',
          !editable && 'bg-muted',
          textAreaClassName,
        )}
        {...props}
      />
      {helperText ? (
        <Text
          className={cn(
            'text-caption',
            error ? 'text-danger' : 'text-muted-foreground',
            helperClassName,
          )}
        >
          {helperText}
        </Text>
      ) : null}
    </View>
  );
}