typescript
import { TextareaHTMLAttributes, forwardRef } from 'react';
import { clsx } from 'clsx';

interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> { 
    label?: string; 
    charCount?: number; 
    maxChars?: number; 
}

export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, label, charCount, maxChars, ...props }, ref) => (
    <div className="flex flex-col gap-1.5">
        {label && (
            <div className="flex justify-between items-center">
                <label className="text-sm font-medium text-gray-700">{label}</label>
                {charCount !== undefined && maxChars && (
                    <span className={clsx('text-xs', charCount > maxChars ? 'text-red-600' : 'text-gray-500')}>
                        {charCount} / {maxChars}
                    </span>
                )}
            </div>
        )}
        <textarea 
            ref={ref} 
            className={clsx(
                'block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none', 
                className
            )} 
            {...props} 
        />
    </div>
));

</html>