Badge

---
/**
 * Badge — A compact visual indicator for labels, categories, or status tags.
 * 
 * @param {string} variant - Visual theme (default|success|warning|danger|info). Default is 'default'.
 * @param {boolean} dot - If true, displays a small decorative circle inside the badge.
 * @param {boolean} pulse - If true, adds a subtle breathing animation to the internal dot.
 * @param {string} className - Optional additional CSS classes.
 */
interface Props {
  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  dot?: boolean;
  pulse?: boolean;
  className?: string;
}

const { variant = 'default', dot = false, pulse = false, className = '' } = Astro.props;
---

<span class:list={['badge', `badge--${variant}`, className]}>
  {dot && <span class:list={['badge__dot', { 'badge__dot--pulse': pulse }]}></span>}
  <slot />
</span>

<style>
  .badge { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--sp-2, 0.4rem); 
    padding: var(--sp-1, 0.25rem) var(--sp-3, 0.7rem); 
    border-radius: var(--r-full, 100px); 
    font-size: 0.72rem; 
    font-weight: 700; 
    letter-spacing: 0.05em; 
    text-transform: uppercase; 
    white-space: nowrap; 
    border: 1px solid transparent;
    transition: 0.2s;
  }
  
  .badge--default { background: rgba(148, 163, 184, 0.12); color: var(--c-text-2, #94a3b8); border-color: var(--c-border, rgba(148, 163, 184, 0.2)); }
  .badge--success { background: rgba(52, 211, 153, 0.12); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
  .badge--warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); }
  .badge--danger { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.25); }
  .badge--info { background: rgba(129, 140, 248, 0.12); color: var(--c-primary-light, #818cf8); border-color: rgba(129, 140, 248, 0.25); }
  
  .badge__dot { width: 6px; height: 6px; border-radius: var(--r-full, 50%); background: currentColor; flex-shrink: 0; }
  .badge__dot--pulse { animation: badge-dot-pulse 2s ease-in-out infinite; }
  
  @keyframes badge-dot-pulse { 
    0%, 100% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.4; transform: scale(0.7); } 
  }
</style>