import Link from 'next/link';
import { t } from '@/i18n';
import { formatDate, formatPct, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { topicById } from '@/lib/topics';
import type { IndicatorSummary } from '@/lib/types';

/** Featured / recently updated indicators as a dense list (name, topic, coverage, last year). */
export function IndicatorList({ items, showUpdated = false, limit = 12 }: { items: IndicatorSummary[]; showUpdated?: boolean; limit?: number }) {
  if (items.length === 0) return <p className="py-4 text-sm text-ink-3">{t('common.noDataLong')}</p>;
  return (
    <ul className="divide-y divide-rule">
      {items.slice(0, limit).map((ind) => (
        <li key={ind.id}>
          <Link href={routes.indicator(ind.slug)} className="group grid min-h-[48px] grid-cols-[1fr_auto] items-center gap-x-4 py-2">
            <span className="min-w-0">
              <span className="block truncate text-sm text-ink group-hover:text-accent">{ind.name ?? ind.slug}</span>
              <span className="block truncate text-xs text-ink-3">
                {topicById(ind.topic ?? '')?.short ?? ind.topic}
                {ind.unit ? ` · ${ind.unit}` : ''}
              </span>
            </span>
            <span className="tnum text-right text-xs text-ink-2">
              {showUpdated && ind.latest_source_updated_at ? <span className="block">{formatDate(ind.latest_source_updated_at)}</span> : null}
              {ind.n_countries != null ? <span className="block">{grouped(ind.n_countries)} countries</span> : null}
              {ind.coverage_pct != null && !showUpdated ? <span className="block text-ink-3">{formatPct(ind.coverage_pct)}</span> : ind.last_year ? <span className="block text-ink-3">→ {ind.last_year}</span> : null}
            </span>
          </Link>
        </li>
      ))}
    </ul>
  );
}