import type { Metadata } from 'next';
import { Suspense } from 'react';
import { t } from '@/i18n';
import { api, isNotBuilt } from '@/lib/api';
import { grouped } from '@/lib/format';
import { CountryDirectory } from '@/components/countries/directory';
import { NotBuiltState } from '@/components/data/empty-state';

export const metadata: Metadata = {
  title: t('countries.title'),
  description: t('countries.sub', { n: 218 }),
  alternates: { canonical: '/countries' },
};
export const revalidate = 900;

export default async function CountriesPage() {
  let items: Awaited<ReturnType<typeof api.countries>>['items'] = [];
  let notBuilt = false;
  try {
    items = (await api.countries({ sort: 'name' })).items;
  } catch (e) {
    if (isNotBuilt(e)) notBuilt = true;
    else throw e;
  }
  return (
    <>
      <header className="pb-2 pt-6 md:pt-10">
        <h1 className="display text-3xl text-ink md:text-4xl">{t('countries.title')}</h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('countries.sub', { n: grouped(items.length || 218) })}</p>
      </header>
      {notBuilt ? (
        <NotBuiltState />
      ) : (
        <Suspense fallback={null}>
          <CountryDirectory items={items} />
        </Suspense>
      )}
    </>
  );
}