import type { Locale } from "@/i18n/routing";

import { getTranslations } from "next-intl/server";

import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { requireOrgMember } from "@/lib/auth-guards";

import { SettingsTabs } from "./settings-tabs";

export default async function SettingsLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { session, activeOrganizationId, role } = await requireOrgMember({
    locale: locale as Locale,
  });
  const t = await getTranslations("Settings");

  return (
    <DashboardShell session={session} activeOrganizationId={activeOrganizationId} role={role}>
      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 md:px-6">
        <header>
          <h1 className="text-2xl font-semibold tracking-tight">{t("tabs.profile")}</h1>
        </header>
        <SettingsTabs />
        <div>{children}</div>
      </div>
    </DashboardShell>
  );
}