spb/countryatlas

1'use client';2import { ArrowLeftRight } from 'lucide-react';3import { useRouter } from 'next/navigation';4import { t } from '@/i18n';5import { routes } from '@/lib/site';6import type { RegionItem } from '@/lib/types-explore';78const KIND_ORDER = ['world', 'region', 'continent', 'income', 'org'];910/** Two group selects (grouped by kind) → /regions/compare?a=&b=. Also used inline on a group page with `fixedA`. */11export function GroupComparePicker({ groups, a, b, fixedA = false }: { groups: RegionItem[]; a: string; b: string; fixedA?: boolean }) {12  const router = useRouter();13  const go = (na: string, nb: string) => router.push(routes.regionCompare(na, nb));14  const byKind = KIND_ORDER.map((k) => ({ kind: k, items: groups.filter((g) => (g.kind ?? 'custom') === k).sort((x, y) => (x.name ?? '').localeCompare(y.name ?? '')) })).filter((g) => g.items.length);15  const select = (value: string, onChange: (v: string) => void, label: string) => (16    <label className="inline-flex h-11 max-w-full items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-10">17      <span className="text-2xs uppercase tracking-wide text-ink-3">{label}</span>18      <select value={value} onChange={(e) => onChange(e.target.value)} className="max-w-[14rem] truncate bg-transparent text-ink outline-none" aria-label={label}>19        {byKind.map((g) => (20          <optgroup key={g.kind} label={t(`regions.kind.${g.kind}` as 'regions.kind.region')}>21            {g.items.map((it) => (22              <option key={it.slug ?? it.id} value={it.slug ?? it.id}>23                {it.name}24              </option>25            ))}26          </optgroup>27        ))}28      </select>29    </label>30  );31  return (32    <div className="flex flex-wrap items-center gap-2">33      {fixedA ? <span className="inline-flex h-11 items-center rounded-sm border border-rule bg-surface-2 px-3 text-sm font-medium text-ink md:h-10">{groups.find((g) => g.slug === a)?.name ?? a}</span> : select(a, (v) => go(v, b), t('regions.compare.a'))}34      <button type="button" onClick={() => go(b, a)} className="tap grid place-items-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-ink md:min-h-[40px] md:min-w-[40px]" aria-label={t('regions.compare.swap')} disabled={fixedA}>35        <ArrowLeftRight size={16} aria-hidden />36      </button>37      {select(b, (v) => go(a, v), t('regions.compare.b'))}38    </div>39  );40}41