spb/countryatlas

1'use client';2import { Info } from 'lucide-react';3import { t } from '@/i18n';4import type { Insight } from '@/lib/types';5import { useProvenance } from '@/components/data/provenance-context';67/** Verified insights list; each ⓘ opens the provenance of the first indicator used by the insight. */8export function KeyFacts({ items, country }: { items: Insight[]; country: { id: string; slug: string | null; name: string; flag?: string | null } }) {9  const { open } = useProvenance();10  if (items.length === 0) return <p className="py-4 text-sm text-ink-3">{t('country.facts.none')}</p>;11  return (12    <ul className="divide-y divide-rule">13      {items.map((ins, i) => {14        const p = ins.provenance[0] ?? null;15        const slug = ins.indicators[0] ?? ins.template_id ?? 'insight';16        return (17          <li key={ins.id ?? i} className="flex items-start gap-3 py-3">18            <p className="min-w-0 flex-1 text-sm leading-snug text-ink md:text-base">{ins.text}</p>19            {p ? (20              <button21                type="button"22                onClick={() => open({ indicator: { slug, name: slug.replace(/-/g, ' '), format: null }, value: { value: null, period: null, provenance: p }, country })}23                className="tap -my-2 -mr-2 grid shrink-0 place-items-center text-ink-3 hover:text-accent"24                aria-label={t('common.openProvenance')}25              >26                <Info size={15} aria-hidden />27              </button>28            ) : null}29          </li>30        );31      })}32    </ul>33  );34}35