import Link from 'next/link';
import { routes } from '@/lib/site';
import { TOPICS } from '@/lib/topics';

/** 19 topics with a one-line blurb, 1 px separators, linking to /indicators?topic=. */
export function TopicsGrid() {
  return (
    <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
      {TOPICS.map((tp) => (
        <li key={tp.id} className="border-t border-rule">
          <Link href={routes.indicators(tp.id)} className="group flex min-h-[64px] flex-col justify-center py-3">
            <span className="text-sm font-semibold text-ink group-hover:text-accent">{tp.name}</span>
            <span className="mt-0.5 text-xs text-ink-2">{tp.blurb}</span>
          </Link>
        </li>
      ))}
    </ul>
  );
}