import type { ReactNode } from "react";
import Header from "../components/Header.server";
import { FooterClient } from "../components/ClientWrappers";
import { getFooterTranslations } from "@/lib/translations-loader";

interface SubpageShellProps {
  locale: string;
  children: ReactNode;
}

/**
 * Rahmen für alle Unterseiten: derselbe Kopf wie auf der Startseite
 * (dort als Papierstreifen), Papier als Grund, Tinten-Footer.
 */
export default async function SubpageShell({ locale, children }: SubpageShellProps) {
  const footerT = await getFooterTranslations(locale);

  return (
    <div id="top" className="min-h-screen bg-paper text-ink">
      <Header locale={locale} />
      <main className="px-4 pb-20 pt-24 sm:px-6 md:pb-28 md:pt-32 lg:px-10">
        <div className="mx-auto max-w-[1400px]">{children}</div>
      </main>
      <FooterClient locale={locale} translations={footerT} />
    </div>
  );
}