spb/countryatlas

1'use client';2import { Info } from 'lucide-react';3import { t } from '@/i18n';4import { formatDate } from '@/lib/format';5import type { Provenance } from '@/lib/types';6import { useProvenance, type ProvenancePayload } from '@/components/data/provenance-context';78/**9 * "Source: World Bank — WDI · NY.GDP.PCAP.CD · retrieved 11 Sep 2026". Click → provenance sheet10 * (when `payload` is given) — otherwise a plain text line.11 */12export function SourceLine({ provenance, payload, className }: { provenance: Provenance | null | undefined; payload?: ProvenancePayload | null; className?: string }) {13  const { open } = useProvenance();14  if (!provenance) return null;15  const parts = [provenance.source_name, provenance.dataset].filter(Boolean).join(' — ');16  const text = [parts, provenance.series_code, provenance.retrieved_at ? t('common.retrieved', { date: formatDate(provenance.retrieved_at) }) : null]17    .filter(Boolean)18    .join(' · ');19  const inner = (20    <>21      <span className="text-ink-3">{t('common.source')}: </span>22      <span>{text}</span>23    </>24  );25  if (!payload) return <p className={`text-2xs text-ink-2 ${className ?? ''}`}>{inner}</p>;26  return (27    <button28      type="button"29      onClick={() => open(payload)}30      className={`group inline-flex min-h-[32px] max-w-full items-center gap-1 text-left text-2xs text-ink-2 hover:text-accent ${className ?? ''}`}31      aria-label={t('common.openProvenance')}32    >33      <span className="truncate">{inner}</span>34      <Info size={12} aria-hidden className="shrink-0 text-ink-3 group-hover:text-accent" />35    </button>36  );37}38