'use client';
import { Info } from 'lucide-react';
import { t } from '@/i18n';
import type { Insight } from '@/lib/types';
import { useProvenance } from '@/components/data/provenance-context';

/** Verified insights list; each ⓘ opens the provenance of the first indicator used by the insight. */
export function KeyFacts({ items, country }: { items: Insight[]; country: { id: string; slug: string | null; name: string; flag?: string | null } }) {
  const { open } = useProvenance();
  if (items.length === 0) return <p className="py-4 text-sm text-ink-3">{t('country.facts.none')}</p>;
  return (
    <ul className="divide-y divide-rule">
      {items.map((ins, i) => {
        const p = ins.provenance[0] ?? null;
        const slug = ins.indicators[0] ?? ins.template_id ?? 'insight';
        return (
          <li key={ins.id ?? i} className="flex items-start gap-3 py-3">
            <p className="min-w-0 flex-1 text-sm leading-snug text-ink md:text-base">{ins.text}</p>
            {p ? (
              <button
                type="button"
                onClick={() => open({ indicator: { slug, name: slug.replace(/-/g, ' '), format: null }, value: { value: null, period: null, provenance: p }, country })}
                className="tap -my-2 -mr-2 grid shrink-0 place-items-center text-ink-3 hover:text-accent"
                aria-label={t('common.openProvenance')}
              >
                <Info size={15} aria-hidden />
              </button>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}