import Link from 'next/link';
import { t } from '@/i18n';
import { WB_REGIONS } from '@/lib/regions';
import { routes } from '@/lib/site';

/** Region chips → /countries?region=… (client-side filter on the directory). */
export function RegionChips() {
  return (
    <ul className="scrollbar-none -mx-4 flex gap-2 overflow-x-auto px-4 pb-1 sm:mx-0 sm:flex-wrap sm:px-0">
      <li>
        <Link href={routes.countries()} className="inline-flex h-11 items-center whitespace-nowrap rounded-sm border border-rule px-3 text-sm text-ink md:h-9 hover:border-accent hover:text-accent">
          {t('home.explore.allCountries')}
        </Link>
      </li>
      {WB_REGIONS.map((r) => (
        <li key={r.id}>
          <Link href={`${routes.countries()}?region=${r.id}`} className="inline-flex h-11 items-center whitespace-nowrap rounded-sm border border-rule px-3 text-sm text-ink-2 md:h-9 hover:border-accent hover:text-accent">
            {r.short}
          </Link>
        </li>
      ))}
    </ul>
  );
}