const { SuitPip, Tag } = window.NicolaiSafaiDesignSystem_dfb31c;

const FACTS = [
  { suit: 'club', label: 'DJ' },
  { suit: 'club', label: 'Gamer' },
  { suit: 'heart', label: 'Neuroscience nerd' },
  { suit: 'diamond', label: 'Gearhead' },
  { suit: 'heart', label: 'Traveler' },
  { suit: 'club', label: 'Magic enthusiast' },
  { suit: 'heart', label: 'Mini poodle dad' },
];

function Snapshot() {
  return (
    <section className="snapshot" aria-label="Beyond work">
      <div className="snapshot-facts">
        <span className="ds-label">Beyond work</span>
        <div className="chiprow">
          {FACTS.map((f) => <Tag key={f.label} suit={f.suit}>{f.label}</Tag>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Snapshot, FACTS });