'use client';

import { ReactNode } from "react";

interface PageLayoutProps {
  children: ReactNode;
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
  versionInfo?: ReactNode;
}

export function PageLayout({ children, maxWidth = "full", versionInfo }: PageLayoutProps) {
  
  const maxWidthClasses = {
    sm: "max-w-3xl",
    md: "max-w-5xl",
    lg: "max-w-6xl",
    xl: "max-w-7xl",
    "2xl": "max-w-[1600px]",
    full: "w-full"
  };

  return (
    <div className={`p-3 md:p-6 pb-0 space-y-3 md:space-y-6 flex flex-col ${maxWidthClasses[maxWidth]} mx-auto w-full relative`}>
      {versionInfo && (
        <div className="absolute top-4 right-4 z-10">
          {versionInfo}
        </div>
      )}
      {children}
    </div>
  );
}