interface Props {
  status: string;
  size?: 'sm' | 'md';
}

const STATUS: Record<string, { color: string; bg: string; dot: string }> = {
  promoted: { color: 'var(--green)',  bg: 'var(--green-dim)', dot: '#059669' },
  active:   { color: 'var(--cyan)',   bg: 'var(--cyan-dim)',  dot: '#0077b6' },
  draft:    { color: 'var(--gold)',   bg: 'var(--gold-dim)',  dot: '#b8860b' },
  retired:  { color: 'var(--text3)',  bg: 'rgba(0,0,0,0.04)', dot: '#9ca3af' },
  archived: { color: 'var(--text3)',  bg: 'rgba(0,0,0,0.03)', dot: '#9ca3af' },
};

export function StatusBadge({ status, size = 'sm' }: Props) {
  const s = STATUS[status] ?? STATUS.active;
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 5,
        padding: size === 'sm' ? '2px 8px' : '3px 10px',
        borderRadius: 5,
        background: s.bg,
        border: '1px solid var(--border)',
        color: s.color,
        fontFamily: 'var(--font-mono)',
        fontSize: size === 'sm' ? 13 : 14,
        fontWeight: 500,
        letterSpacing: '0.03em',
        whiteSpace: 'nowrap',
      }}
    >
      <span
        style={{
          width: 5,
          height: 5,
          borderRadius: '50%',
          background: s.dot,
          flexShrink: 0,
        }}
      />
      {status === 'promoted' ? 'pinned' : status}
    </span>
  );
}
