---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/cn';
import { generateId } from '@/lib/utils';
import { textareaVariants } from './textarea.variants';

interface Props extends HTMLAttributes<'textarea'> {
  label?: string;
  error?: string;
  hint?: string;
  size?: 'sm' | 'md' | 'lg';
  rows?: number;
}

const {
  label,
  error,
  hint,
  size = 'md',
  rows = 4,
  class: className,
  id,
  ...attrs
} = Astro.props;

const textareaId = id || generateId('textarea');

const textareaStyles = cn(
  textareaVariants({ size }),
  error && 'border-destructive focus-visible:ring-destructive'
);
---

<div class={cn('space-y-1.5', className)}>
  {
    label && (
      <label for={textareaId} class="text-sm font-medium leading-none">
        {label}
      </label>
    )
  }

  <textarea
    id={textareaId}
    class={textareaStyles}
    rows={rows}
    aria-invalid={error ? 'true' : undefined}
    aria-describedby={error ? `${textareaId}-error` : hint ? `${textareaId}-hint` : undefined}
    {...attrs}
  />

  {
    error && (
      <p id={`${textareaId}-error`} class="text-sm text-destructive">
        {error}
      </p>
    )
  }

  {
    hint && !error && (
      <p id={`${textareaId}-hint`} class="text-sm text-muted-foreground">
        {hint}
      </p>
    )
  }
</div>
