import * as React from 'react';
import type { VariantProps } from '@/lib/cva';

import { cn } from '@/lib/utils';
import { inputVariants } from '@/components/input';

export interface TextareaProps
  extends Omit<React.ComponentProps<'textarea'>, 'size'>,
    VariantProps<typeof inputVariants> {}

/**
 * Multi-line text field. Grows with its content via `field-sizing-content`,
 * so no auto-resize JavaScript is needed.
 *
 * Shares Input's variants and size ladder, since CBAR draws the two the same
 * way. The named size sets the *minimum* height — the field grows past it.
 */
function Textarea({ className, variant, size, ...props }: TextareaProps) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        inputVariants({ variant, size }),
        /* The ladder's fixed height becomes a floor, and vertical padding
           replaces the centring a single-line field gets for free. */
        'flex field-sizing-content h-auto py-2',
        {
          xs: 'min-h-8',
          sm: 'min-h-9',
          md: 'min-h-11',
          lg: 'min-h-14',
        }[size ?? 'md'],
        className
      )}
      {...props}
    />
  );
}

export { Textarea };