// shadcn-style Textarea — multi-line sibling of <Input>. Used by the
// data viewer's JSON cell editor (pass `className="font-mono"` for code).

import type { TextareaHTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

export const Textarea = ({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>): ReactNode => (
  <textarea
    data-slot="textarea"
    className={cn(
      'flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs',
      'transition-[color,box-shadow] outline-none',
      'placeholder:text-muted-foreground',
      'selection:bg-primary selection:text-primary-foreground',
      'dark:bg-input/30',
      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
      'md:text-sm',
      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
      className,
    )}
    {...props}
  />
)