---
/**
 * Badge / Eyebrow Label Component
 *
 * Used as section labels ("Why Choose Us", "Our Services") above headings.
 *
 * @prop {string} label - The badge text
 * @prop {'primary' | 'primary-dark' | 'accent' | 'secondary'} variant - Color variant
 *   - 'primary'      → light background (use on white / light sections)
 *   - 'primary-dark' → translucent (use on dark/hero sections)
 *   - 'accent'       → amber tones (testimonials, stats)
 *   - 'secondary'    → neutral gray
 * @prop {string} [class] - Extra classes to merge in
 */

interface Props {
  label: string;
  variant?: 'primary' | 'primary-dark' | 'accent' | 'secondary';
  class?: string;
}

const {
  label,
  variant = 'primary',
  class: extraClass = '',
} = Astro.props;

const variantClasses: Record<string, string> = {
  'primary':      'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
  'primary-dark': 'bg-primary-400/20 text-primary-300',
  'accent':       'bg-accent-50 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
  'secondary':    'bg-secondary-100 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300',
};

const classes = [
  'inline-block px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wider mb-4',
  variantClasses[variant],
  extraClass,
].filter(Boolean).join(' ');
---

<span class={classes}>{label}</span>
