import { ReactNode, useEffect, useRef } from "react";
import { useDeveloperMode, ComponentMetadata } from "../contexts/DeveloperModeContext";

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

export function PageLayout({ children, maxWidth = "full", devMetadata, versionInfo }: PageLayoutProps) {
  const { setCurrentMetadata } = useDeveloperMode();
  const metadataRef = useRef<ComponentMetadata | null>(null);
  
  useEffect(() => {
    // Only update if metadata actually changed
    if (devMetadata && JSON.stringify(devMetadata) !== JSON.stringify(metadataRef.current)) {
      metadataRef.current = devMetadata;
      setCurrentMetadata(devMetadata);
    }
    
    // 컴포넌트 언마운트 시 메타데이터 초기화
    return () => {
      setCurrentMetadata(null);
      metadataRef.current = null;
    };
  }, []); // Empty dependency array - only run on mount/unmount
  
  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`}>
      {versionInfo && (
        <div className="flex justify-end w-full">
          {versionInfo}
        </div>
      )}
      {children}
    </div>
  );
}