breakpilot-compliance/admin-compliance/components/redesign/Chips.tsx

'use client'

// Reusable design-language chips. Geltung (Pflicht/Empfehlung/Kann) and Severity
// follow the handoff specs exactly (bg/text/border + marker glyph). Klartext label
// leads; internal IDs are never shown by the chip itself. See ./tokens.

import {
  GELTUNG, PFLICHT_MARKER, SEVERITY, DOMAIN,
  normalizeGeltung, normalizeSeverity, Geltung, Severity, Domain,
} from './tokens'

function GeltungMarker({ g }: { g: Geltung }) {
  const m = GELTUNG[g].marker
  if (m === 'square') {
    return <span aria-hidden style={{ width: 7, height: 7, borderRadius: 2, background: PFLICHT_MARKER, display: 'inline-block' }} />
  }
  // diamond ◇ (Empfehlung) / circle ○ (Kann) — open glyphs in the chip text color
  return <span aria-hidden style={{ fontSize: 10, lineHeight: 1 }}>{m === 'diamond' ? '◇' : '○'}</span>
}

export function GeltungChip({ value, className = '' }: { value: Geltung | string; className?: string }) {
  const g = normalizeGeltung(value)
  const t = GELTUNG[g]
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-md font-publicSans font-bold ${className}`}
      style={{ background: t.bg, color: t.text, border: `1px solid ${t.border}`, padding: '3px 9px', fontSize: 11 }}
    >
      <GeltungMarker g={g} />
      {t.label}
    </span>
  )
}

export function SeverityChip({ value, className = '' }: { value: Severity | string; className?: string }) {
  const s = normalizeSeverity(value)
  const t = SEVERITY[s]
  return (
    <span
      className={`inline-flex items-center rounded-[7px] font-publicSans font-bold ${className}`}
      style={{ background: t.bg, color: t.text, padding: '4px 11px', fontSize: 12 }}
    >
      {t.label}
    </span>
  )
}

// Small domain tag (Safety / Cyber / Schnittstelle) — tinted, not neon.
export function DomainTag({ value, label, className = '' }: { value: Domain; label?: string; className?: string }) {
  const d = DOMAIN[value]
  return (
    <span
      className={`inline-flex items-center rounded-md font-publicSans font-semibold ${className}`}
      style={{ background: d.tint, color: d.warn || d.accent, border: `1px solid ${d.border}`, padding: '3px 9px', fontSize: 11 }}
    >
      {label || d.label}
    </span>
  )
}

// Monospace internal ID — IDs are ALWAYS secondary/nachgestellt, never a heading.
export function MonoId({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return <span className={`font-plexMono ${className}`} style={{ fontSize: 11.5, color: '#A2A8B8' }}>{children}</span>
}