import {
  RdxPageContainer,
  RdxPageFrame,
  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[];
}

/**
 * Compone la navegación y el contenido de configuración dentro del frame estándar de página.
 */
export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
  const { t } = useAppTranslation();

  return (
    <RdxPageFrame>
      <RdxPageContainer className="space-y-6" width="full">
        <RdxPageHeader
          description={t("web.settings.description")}
          title={t("web.settings.title")}
        />

        <RdxPageStack spacing="default">
          <div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
            <aside className="min-w-0 lg:sticky lg:top-6 lg:self-start">
              <SettingsNavigation sections={sections} />
            </aside>

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