import type { ReactNode } from "react";
import { TopNav } from "@/components/navigation/top-nav";
import { cn } from "@/lib/utils/cn";

export interface SettingsPageShellProps {
  title: string;
  children: ReactNode;
  /** Merged onto the default `<main>` classes via cn()/tailwind-merge — pass e.g. "lg:max-w-2xl" to opt out of the default wide desktop layout, or extra utilities like "space-y-8". */
  mainClassName?: string;
}

/**
 * The TopNav + centered container wrapper repeated verbatim across every
 * owner settings page (Business Details, Gallery, Loyalty, Booking
 * Rules, Opening Hours, Reviews, ...) — extracted here in Phase 9 once
 * enough pages shared it to be worth the indirection. See
 * docs/phase-9-summary.md, "Architecture Review".
 */
export function SettingsPageShell({ title, children, mainClassName }: SettingsPageShellProps) {
  return (
    <div className="pb-12">
      <TopNav title={title} onBack sticky className="bg-stone" />
      <main className={cn("mx-auto max-w-2xl px-6 py-6 lg:max-w-4xl", mainClassName)}>{children}</main>
    </div>
  );
}