import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import { TOPICS } from '@/lib/topics';
import type { TopicSummary } from '@/lib/types';

/** Navigation to the 19 topic pages with indicator counts (n with data / n total). */
export function CountryTopicsGrid({ slug, topics }: { slug: string; topics: TopicSummary[] }) {
  const byId = new Map(topics.map((tp) => [tp.id, tp]));
  return (
    <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
      {TOPICS.map((def) => {
        const tp = byId.get(def.id);
        return (
          <li key={def.id} className="border-t border-rule">
            <Link href={routes.countryTopic(slug, def.id)} className="group flex min-h-[56px] items-center justify-between gap-3 py-2.5">
              <span className="min-w-0">
                <span className="block truncate text-sm font-medium text-ink group-hover:text-accent">{def.name}</span>
                <span className="tnum block text-xs text-ink-3">
                  {tp ? `${t('country.topics.withData', { n: tp.n_with_data })} · ${t('country.topics.count', { n: tp.n_indicators })}` : def.blurb}
                </span>
              </span>
              <ChevronRight size={16} aria-hidden className="shrink-0 text-ink-3 group-hover:text-accent" />
            </Link>
          </li>
        );
      })}
    </ul>
  );
}