---
import { cn } from '@/lib/cn';
import { generateId } from '@/lib/utils';

interface Props {
  label?: string;
  error?: string;
  hint?: string;
  required?: boolean;
  class?: string;
}

const { label, error, hint, required = false, class: className } = Astro.props;

const fieldId = generateId('field');
---

<div class={cn('space-y-1.5', className)}>
  {
    label && (
      <label for={fieldId} class="text-sm font-medium leading-none">
        {label}
        {required && <span class="text-destructive ml-0.5">*</span>}
      </label>
    )
  }

  <slot name="input" id={fieldId} />

  {
    error && (
      <p class="text-sm text-destructive" role="alert">
        {error}
      </p>
    )
  }

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