import type { ReactNode } from "react";
import Header from "@/layout/components/Header";
import Footer from "@/layout/components/Footer";

interface ComplaintPageLayoutProps {
  children: ReactNode;
  heroTitle: string;
  heroSubtitle?: string;
}

export function ComplaintPageLayout({
  children,
  heroTitle,
  heroSubtitle,
}: ComplaintPageLayoutProps) {
  return (
    <div>
      <Header />
      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
        <div className="bg-primary py-12 md:py-16 text-center text-white relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
          <h1 className="text-3xl md:text-5xl font-bold mb-3 relative z-10">
            {heroTitle}
          </h1>
          {heroSubtitle && (
            <p className="max-w-2xl mx-auto text-base md:text-lg opacity-90 relative z-10 px-4">
              {heroSubtitle}
            </p>
          )}
        </div>
        <div className="flex-1 flex justify-center p-4 md:p-6">{children}</div>
      </div>
      <Footer />
    </div>
  );
}