spb/countryatlas

1'use client';2import { useRouter } from 'next/navigation';3import { t } from '@/i18n';4import { routes } from '@/lib/site';5import { TOPICS } from '@/lib/topics';6import { Segmented } from '@/components/controls/indicator-select';78const WINDOWS = ['1', '5', '10', '25', 'since1990'] as const;910/** Window · topic · population toggle — every change navigates (server re-renders the facets). */11export function ExtremesControls({ window, topic, all }: { window: string; topic: string | null; all: boolean }) {12  const router = useRouter();13  const go = (patch: { window?: string; topic?: string | null; all?: boolean }) => {14    const w = patch.window ?? window;15    const tp = patch.topic === undefined ? topic : patch.topic;16    const a = patch.all ?? all;17    const p = new URLSearchParams();18    if (w !== '10') p.set('window', w);19    if (tp) p.set('topic', tp);20    if (a) p.set('all', '1');21    const s = p.toString();22    router.replace(`${routes.extremes()}${s ? `?${s}` : ''}`, { scroll: false });23  };24  return (25    <div className="flex flex-wrap items-center gap-2 border-y border-rule py-3">26      <Segmented value={window} onChange={(w) => go({ window: w })} options={WINDOWS.map((w) => ({ value: w, label: t(`extremes.window.${w}` as 'extremes.window.1') }))} label={t('extremes.window')} size="sm" className="max-w-full overflow-x-auto" />27      <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">28        <span className="text-2xs uppercase tracking-wide text-ink-3">{t('extremes.topic')}</span>29        <select value={topic ?? ''} onChange={(e) => go({ topic: e.target.value || null })} className="bg-transparent text-ink outline-none" aria-label={t('extremes.topic')}>30          <option value="">{t('extremes.allTopics')}</option>31          {TOPICS.map((tp) => (32            <option key={tp.id} value={tp.id}>33              {tp.short}34            </option>35          ))}36        </select>37      </label>38      <label className="inline-flex h-11 cursor-pointer items-center gap-1.5 rounded-sm border border-rule px-2.5 text-sm text-ink-2 md:h-9">39        <input type="checkbox" checked={!all} onChange={(e) => go({ all: !e.target.checked })} className="accent-[var(--accent)]" />40        {t('extremes.minPop')}41      </label>42    </div>43  );44}45