import { clsxm } from '@afilmory/utils'
import type { TextareaHTMLAttributes } from 'react'

export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  /**
   * Whether the textarea has an error state
   */
  error?: boolean
  /**
   * Additional class name
   */
  className?: string
}

/**
 * A styled textarea component following the dashboard design language.
 *
 * Features:
 * - `rounded` for subtle rounded corners
 * - Consistent padding and text styles
 * - Focus ring with accent color
 * - Error state support
 * - Full TypeScript support with forwarded ref
 * - Auto-resizable height support via native rows prop
 *
 * @example
 * ```tsx
 * <Textarea
 *   placeholder="Enter description"
 *   rows={3}
 *   error={hasError}
 * />
 * ```
 */
export const Textarea = ({
  ref,
  error,
  className,
  ...props
}: TextareaProps & { ref?: React.RefObject<HTMLTextAreaElement | null> }) => (
  <textarea
    ref={ref}
    className={clsxm(
      'w-full rounded border border-fill-tertiary bg-background',
      'px-3 py-2 text-sm text-text placeholder:text-text-tertiary/70',
      'focus:outline-none focus:ring-2 focus:ring-accent/40',
      'transition-all duration-200',
      'disabled:cursor-not-allowed disabled:opacity-60',
      'resize-y',
      error && 'border-red/60 focus:ring-red/30',
      className,
    )}
    {...props}
  />
)

Textarea.displayName = 'Textarea'
