import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Breadcrumb from "@/components/search/Breadcrumb";

interface StaticPageLayoutProps {
  title: string;
  subtitle?: string;
  badge?: string;
  breadcrumbs: { label: string; href?: string }[];
  children: React.ReactNode;
}

export default function StaticPageLayout({
  title,
  subtitle,
  badge,
  breadcrumbs,
  children,
}: StaticPageLayoutProps) {
  return (
    <>
      <Header />
      <main className="min-h-screen pt-24 pb-16">
        <div className="hero-glow pointer-events-none absolute inset-x-0 top-0 h-96 opacity-40" />
        <div className="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <div className="py-4">
            <Breadcrumb items={breadcrumbs} />
          </div>

          <div className="mt-4 mb-10">
            {badge && (
              <span className="inline-flex rounded-full border border-emerald-500/20 bg-emerald-500/8 px-3.5 py-1 text-xs font-semibold uppercase tracking-widest text-emerald-400">
                {badge}
              </span>
            )}
            <h1 className="mt-4 text-3xl font-extrabold tracking-tight text-white sm:text-4xl lg:text-5xl">
              {title}
            </h1>
            {subtitle && (
              <p className="mt-4 text-lg leading-relaxed text-slate-400">{subtitle}</p>
            )}
          </div>

          <div className="prose-content">{children}</div>
        </div>
      </main>
      <Footer />
    </>
  );
}