import { getTranslations, setRequestLocale } from "next-intl/server";
import { RatesExplorer } from "@/components/rates-explorer";
import { listCountryRates } from "@/lib/rates";

export default async function RatesPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations();
  const rates = await listCountryRates();

  return (
    <div className="space-y-8">
      <section className="card p-8">
        <p className="text-sm font-medium text-gold">earnvato.com</p>
        <h1 className="mt-2 page-title">{t("rates.pageTitle")}</h1>
        <p className="mt-2 max-w-2xl text-muted">{t("rates.pageHint")}</p>
      </section>
      <RatesExplorer
        locale={locale}
        rates={rates}
        labels={{
          choose: t("rates.choose"),
          links: t("rates.linkTitle"),
          files: t("rates.fileTitle"),
          linkTitle: t("rates.linkTitle"),
          fileTitle: t("rates.fileTitle"),
          linkHint: t("rates.linkHint"),
          fileHint: t("rates.fileHint"),
          country: t("rates.country"),
          perThousand: t("rates.perThousand"),
        }}
      />
    </div>
  );
}