spb/countryatlas

1'use client';2import { Download } from 'lucide-react';3import Link from 'next/link';4import { useState } from 'react';5import { t } from '@/i18n';6import { cn } from '@/lib/cn';7import { routes } from '@/lib/site';8import { EntityPicker, type PickedEntity } from './entity-picker';910/** Typeahead → CSV / JSON download links for a country or an indicator dataset. */11export function DownloadPicker({ type }: { type: 'country' | 'indicator' }) {12  const [picked, setPicked] = useState<PickedEntity | null>(null);13  const href = (fmt: 'csv' | 'json') => (picked ? (type === 'country' ? routes.countryDownload(picked.id, fmt) : routes.indicatorDownload(picked.slug, fmt)) : '#');14  const disabled = !picked;15  const cls = cn('inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border px-3 text-sm md:min-h-[36px]', disabled ? 'pointer-events-none border-rule text-ink-3' : 'border-rule text-ink hover:bg-surface-2');16  return (17    <div className="min-w-0">18      <EntityPicker type={type} placeholder={type === 'country' ? t('data.country.search') : t('data.indicator.search')} onPick={setPicked} keepValue className="max-w-md" />19      <div className="mt-3 flex flex-wrap items-center gap-2">20        <a href={href('csv')} className={cls} aria-disabled={disabled} download>21          <Download size={14} aria-hidden /> CSV22        </a>23        <a href={href('json')} className={cls} aria-disabled={disabled} download>24          <Download size={14} aria-hidden /> JSON25        </a>26        {picked ? (27          <Link href={type === 'country' ? routes.country(picked.slug) : routes.indicator(picked.slug)} className="inline-flex min-h-[44px] items-center gap-1 text-sm text-accent hover:underline md:min-h-[36px]">28            {picked.flag ? <span aria-hidden>{picked.flag}</span> : null}29            {picked.name} →30          </Link>31        ) : (32          <span className="text-xs text-ink-3">{t('data.pick')}</span>33        )}34      </div>35    </div>36  );37}38