import { Outlet } from "react-router-dom";
import { HEADER_LAYOUTS, FOOTER_LAYOUTS } from "@/components/site-layouts";
import { useSiteChrome } from "@/contexts/SiteChromeContext";
import { useSiteSettings } from "@/contexts/SiteSettingsContext";

export type { SiteSettings } from "@/lib/siteSettings";

export function SiteLayout() {
  const { settings } = useSiteSettings();
  const { hasPageFooter } = useSiteChrome();

  const headerKey = settings.header_layout;
  const footerKey = settings.footer_layout;
  const HeaderComponent = HEADER_LAYOUTS[headerKey]?.Component ?? HEADER_LAYOUTS.default.Component;
  const FooterComponent = FOOTER_LAYOUTS[footerKey]?.Component ?? FOOTER_LAYOUTS.default.Component;

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <HeaderComponent />
      <main className="flex-1">
        <Outlet />
      </main>
      {/* One site footer only. Omitted when Show Default Footer is off, or when the page
          already has a page-level footer block. Closing Vision does not suppress this footer. */}
      {!hasPageFooter ? <FooterComponent /> : null}
    </div>
  );
}