import * as React from 'react';

import { cn } from '../../shared/utils';

/**
 * Props para o componente Textarea.
 *
 * @interface TextareaProps
 */
export interface TextareaProps extends React.ComponentProps<'textarea'> {
  /**
   * Size variant — matches the Input component sizing scale.
   * Controls padding and font size (height is determined by `rows` prop or content).
   * - `sm`: px-2 py-1, text-sm
   * - `md`: px-3 py-2, text-base — **default**, aligned with Input default
   * - `lg`: px-4 py-3, text-base
   */
  size?: 'sm' | 'md' | 'lg';
}

/**
 * Multi-line text input for extended content.
 *
 * @description
 * Styled replacement for the native HTML `<textarea>` element.
 * Supports the same size scale as Input (`sm`, `md`, `lg`) for consistent form alignment.
 *
 * @ai-rules
 * 1. Use when capturing large text blocks: descriptions, bios, notes, comments.
 * 2. Inside React Hook Form, wrap in `<FormControl>` and pass `{...field}`.
 * 3. Do NOT use `<Input>` for multi-line text — always use `<Textarea>`.
 * 4. The `size` prop controls padding and font — not height. Use `rows` to control height.
 */
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, size = 'md', ...props }, ref) => {
    const sizeClasses = {
      sm: 'px-2 py-1 text-sm',
      md: 'px-3 py-2 text-base',
      lg: 'px-4 py-3 text-base',
    };

    return (
      <textarea
        data-slot="textarea"
        className={cn(
          'flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground',
          'placeholder:text-muted-foreground',
          'focus:ring-2 focus:ring-primary focus:border-transparent',
          'disabled:cursor-not-allowed disabled:opacity-50',
          sizeClasses[size],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Textarea.displayName = 'Textarea';

export { Textarea };
