/* global React */

// Eyebrow / section label — same atom as PillButton but non-clickable.
// Per Figma: h=29px, radius 4, padding 10px exact, font 700 12px/100%, letter-spacing 0.06em
function SectionLabel({ children, variant = 'light', style }) {
  const base = {
    display: 'inline-flex', width: 'fit-content',
    alignItems: 'center', justifyContent: 'center',
    height: 29,
    padding: '0 10px',
    font: '700 12px/1 var(--font-body)',
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    borderRadius: 4,
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
    cursor: 'default',
    ...style,
  };
  const variants = {
    // 'light' = on light bg, forest tint
    light: { color: '#283836', background: 'rgba(40, 56, 54, 0.12)' },
    // 'dark' = on dark bg, white tint
    dark:  { color: '#fff', background: 'rgba(255, 255, 255, 0.12)' },
  };
  return <span style={{ ...base, ...variants[variant] }}>{children}</span>;
}

window.SectionLabel = SectionLabel;