import { TextareaHTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/cn';

interface TextareaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  error?: boolean;
}

export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
  ({ name, error, className, disabled, ...props }, ref) => {
    return (
      <div className="mb-4">
        <textarea
          id={name}
          name={name}
          ref={ref}
          disabled={disabled}
          aria-disabled={disabled}
          aria-invalid={error || undefined}
          className={cn(
            'text-text-primary block w-full border p-2 text-sm',
            error ? 'border-red-600 bg-red-200' : 'border-gray-500 bg-white',
            disabled && 'bg-gray-border-gray-200',
            className,
          )}
          {...props}
        />
      </div>
    );
  },
);

TextareaField.displayName = 'TextareaField';
export default TextareaField;