// @design-system: primitives/Textarea
// Registered at /design-system#textarea-primitive - Phase 3 (Agent 3E) will render the gallery.

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

/** Props for the Textarea component */
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  /** When true, applies error styles and aria-invalid. */
  invalid?: boolean;
  /** When true, lets free text choose direction from its first strong character. */
  autoDir?: boolean;
  /** Hint text. Wired to aria-describedby via FormField. */
  hint?: string;
}

/**
 * Multideal Textarea primitive - same styling pattern as Input.
 * Ref-forwardable for react-hook-form integration.
 *
 * @example
 * ```tsx
 * <Textarea rows={4} invalid={!!errors.description} />
 * ```
 */
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
  { className, invalid, autoDir, dir, hint: _hint, ...props },
  ref,
) {
  const resolvedDir = dir ?? (autoDir ? 'auto' : undefined);

  return (
    <textarea
      ref={ref}
      dir={resolvedDir}
      aria-invalid={invalid || undefined}
      className={cn(
        'border-border-default bg-surface-base w-full rounded-md border',
        'placeholder:text-text-muted text-base text-neutral-900',
        'py-2 ps-3 pe-3',
        'min-h-20 resize-y',
        'transition-colors',
        'focus-visible:border-brand-primary-500 focus-visible:ring-brand-primary-500/40 focus-visible:ring-2 focus-visible:outline-none',
        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400',
        invalid &&
          'border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/40',
        className,
      )}
      {...props}
    />
  );
});