import { ReactNode } from "react"

interface PageWrapperProps {
  children: ReactNode;
  maxWidth?: "4xl" | "5xl" | "6xl" | "7xl" | "full";
  className?: string;
}

export function PageWrapper({ children, maxWidth = "4xl", className = "" }: PageWrapperProps) {
  const maxWidthClass = {
    "4xl": "max-w-4xl",
    "5xl": "max-w-5xl",
    "6xl": "max-w-6xl",
    "7xl": "max-w-7xl",
    "full": "max-w-full",
  }[maxWidth];

  return (
    <div className={`container mx-auto px-4 py-8 md:py-12 ${maxWidthClass} ${className}`}>
      {children}
    </div>
  );
}

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  className?: string;
}

export function PageHeader({ title, subtitle, className = "" }: PageHeaderProps) {
  return (
    <div className={`mb-8 md:mb-12 text-center ${className}`}>
      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 tracking-tight text-balance">
        {title}
      </h1>
      {subtitle && (
        <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto text-balance">
          {subtitle}
        </p>
      )}
    </div>
  );
}