// Additional primitives: StatusBadge, Badge (used by messages, event-detail tabs, etc.)

const Badge = ({ variant = 'neutral', children, style = {} }) => {
  const tones = {
    neutral: { bg: 'var(--bg-muted)', fg: 'var(--ink-2)' },
    success: { bg: 'color-mix(in oklch, var(--success) 15%, var(--bg-raised))', fg: 'var(--success)' },
    danger:  { bg: 'color-mix(in oklch, var(--danger) 15%, var(--bg-raised))', fg: 'var(--danger)' },
    warning: { bg: 'color-mix(in oklch, var(--warning) 20%, var(--bg-raised))', fg: 'oklch(0.48 0.12 75)' },
    accent:  { bg: 'color-mix(in oklch, var(--accent) 12%, var(--bg-raised))', fg: 'var(--accent)' },
  };
  const t = tones[variant] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '2px 8px', borderRadius: 6, fontSize: 10.5, fontWeight: 600,
      letterSpacing: '0.02em', textTransform: 'uppercase',
      background: t.bg, color: t.fg, ...style,
    }}>{children}</span>
  );
};

const StatusBadge = ({ status }) => {
  const map = {
    sent: { v: 'success', l: 'Sent' },
    scheduled: { v: 'accent', l: 'Scheduled' },
    draft: { v: 'neutral', l: 'Draft' },
    active: { v: 'success', l: 'Active' },
    paused: { v: 'warning', l: 'Paused' },
    ended: { v: 'neutral', l: 'Ended' },
    selling: { v: 'success', l: 'Selling' },
  };
  const s = map[status] || { v: 'neutral', l: status };
  return <Badge variant={s.v}>
    <span style={{ width: 5, height: 5, borderRadius: 99, marginRight: 5,
      background: s.v === 'success' ? 'var(--success)' : s.v === 'accent' ? 'var(--accent)' : s.v === 'warning' ? 'oklch(0.58 0.14 75)' : 'var(--ink-3)',
    }}/>
    {s.l}
  </Badge>;
};

window.Badge = Badge;
window.StatusBadge = StatusBadge;