import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
import { Outlet } from "react-router-dom";

import type { SettingsNavigationSection } from "@/settings/build-settings-navigation";

import { useAppTranslation } from "../locales/i18n";

import { SettingsNavigation } from "./settings-navigation";

interface SettingsLayoutProps {
  sections: SettingsNavigationSection[];
}

export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
  const { t } = useAppTranslation();

  return (
    <RdxPageContainer width="full">
      <RdxPageStack spacing="default">
        <RdxPageHeader
          description={t("web.settings.description")}
          title={t("web.settings.title")}
        />

        <div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
          <aside className="rounded-xl border border-border bg-card p-4 shadow-sm lg:sticky lg:top-6 lg:self-start">
            <SettingsNavigation sections={sections} />
          </aside>

          <section className="min-w-0">
            <Outlet />
          </section>
        </div>
      </RdxPageStack>
    </RdxPageContainer>
  );
};