import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { ServerList } from "@/components/servers/server-list";

interface ServersPageProps {
  params: Promise<{ locale: string }>;
}

export default async function ServersPage({ params }: ServersPageProps) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("servers");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
            {t("title")}
          </h1>
          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
        </div>
        <Link
          href="/servers/new"
          className="inline-flex h-10 items-center rounded-md bg-sky-600 px-4 text-sm font-medium text-white hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400"
        >
          {t("create")}
        </Link>
      </div>

      <ServerList />
    </div>
  );
}
