import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import type { CountrySummary } from '@/lib/types';

export const COMPARE_PRESETS: Array<[string, string]> = [
  ['canada', 'united-states'],
  ['france', 'germany'],
  ['japan', 'south-korea'],
  ['brazil', 'mexico'],
  ['india', 'china'],
  ['nigeria', 'south-africa'],
  ['australia', 'united-kingdom'],
  ['sweden', 'norway'],
];

/** Preset pairs linking to /compare/a/b (built by the next agent). Uses the countries list for flags/names. */
export function CompareTeaser({ countries }: { countries: CountrySummary[] }) {
  const bySlug = new Map(countries.map((c) => [c.slug, c]));
  const pairs = COMPARE_PRESETS.map(([a, b]) => [bySlug.get(a), bySlug.get(b)] as const).filter((p): p is [CountrySummary, CountrySummary] => !!p[0] && !!p[1]);
  return (
    <div>
      <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-4">
        {pairs.map(([a, b]) => (
          <li key={`${a.slug}-${b.slug}`} className="border-t border-rule">
            <Link href={routes.compare(a.slug ?? a.id, b.slug ?? b.id)} className="group flex min-h-[56px] items-center gap-2 py-2.5 text-sm">
              <span aria-hidden className="text-lg leading-none">
                {a.flag}
              </span>
              <span className="truncate text-ink group-hover:text-accent">{a.name}</span>
              <span className="text-ink-3">vs</span>
              <span aria-hidden className="text-lg leading-none">
                {b.flag}
              </span>
              <span className="truncate text-ink group-hover:text-accent">{b.name}</span>
              <ArrowRight size={14} aria-hidden className="ml-auto shrink-0 text-ink-3 group-hover:text-accent" />
            </Link>
          </li>
        ))}
      </ul>
      <Link href={routes.compare()} className="mt-3 inline-flex min-h-[40px] items-center text-sm text-accent hover:underline">
        {t('home.compare.custom')} →
      </Link>
    </div>
  );
}