import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'
import { Link } from '@/navigation'
import { SUPPORTED_SITES } from '@/lib/supported-sites'
import { SupportedSitesBrowser } from '@/components/SupportedSitesBrowser'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>
}): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'supportedSitesPage' })

  return {
    title: t('title'),
    description: t('description'),
  }
}

export default async function SupportedSitesPage({
  params,
}: {
  params: Promise<{ locale: string }>
}) {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'supportedSitesPage' })

  return (
    <main className="px-6 py-16">
      <div className="max-w-4xl mx-auto">
        <Link
          href="/"
          className="inline-block text-sm text-violet-600 dark:text-violet-400 hover:underline"
        >
          {t('back')}
        </Link>

        <h1 className="mt-4 text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 text-center">
          {t('heading')}
        </h1>
        <p className="mt-3 text-gray-500 dark:text-gray-400 text-center max-w-2xl mx-auto">
          {t('subheading')}
        </p>

        <div className="mt-10">
          <SupportedSitesBrowser
            sites={SUPPORTED_SITES}
            searchPlaceholder={t('searchPlaceholder')}
            resultCountTemplate={t.raw('resultCount')}
            noResultsLabel={t('noResults')}
          />
        </div>

        <p className="mt-12 text-xs text-gray-400 dark:text-slate-500 text-center max-w-2xl mx-auto">
          {t('note')}
        </p>
      </div>
    </main>
  )
}