import type { ReactNode } from "react";
import { SiteHeader } from "./site-header";
import { SiteFooter } from "./site-footer";
import { Breadcrumb } from "./breadcrumb";

interface Props {
  title: string;
  eyebrow?: string;
  description?: string;
  children: ReactNode;
}

/**
 * Shared layout for static informational pages — Giới thiệu, Liên hệ, Bảo mật, etc.
 * Uses the same masthead + breadcrumb + reading-width content frame as posts.
 */
export function StaticPage({ title, eyebrow, description, children }: Props) {
  return (
    <>
      <SiteHeader />

      <div
        className="border-b hairline"
        style={{ background: "var(--bg)" }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-3">
          <Breadcrumb items={[{ label: "Trang chủ", href: "/" }, { label: title }]} />
        </div>
      </div>

      <main
        id="main"
        className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-10 lg:py-16"
      >
        <header className="text-center mb-10 pb-8 border-b hairline-strong max-w-3xl mx-auto">
          {eyebrow && <div className="eyebrow mb-3">{eyebrow}</div>}
          <h1 className="display-xl">{title}</h1>
          {description && (
            <p
              className="mt-4 text-base lg:text-lg leading-relaxed"
              style={{ color: "var(--ink-2)" }}
            >
              {description}
            </p>
          )}
        </header>

        <div className="prose-fz max-w-[var(--container-reading)] mx-auto">{children}</div>
      </main>

      <SiteFooter />
    </>
  );
}