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>
  )
}