---
/**
 * Badge Component
 * Displays a small status indicator or label with proper icon spacing
 */
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/cn';
import { badgeVariants } from './badge.variants';

interface Props extends HTMLAttributes<'span'> {
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'brand';
  size?: 'sm' | 'md';
  /** Show a pulsing dot indicator */
  pulse?: boolean;
  /** Use pill styling (fully rounded with shadow) */
  pill?: boolean;
}

const { variant = 'default', size = 'md', pulse = false, pill = false, class: className, ...attrs } = Astro.props;
---

<span class={cn(badgeVariants({ variant, size, pill }), className)} {...attrs}>
  {pulse && (
    <span class="relative flex h-2 w-2 shrink-0" aria-hidden="true">
      <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-500 opacity-75" />
      <span class="relative inline-flex h-2 w-2 rounded-full bg-brand-500" />
    </span>
  )}
  <slot />
</span>
