'use client';

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-4 md:p-6 space-y-4 md:space-y-6 ${maxWidthClasses[maxWidth]} mx-auto w-full relative`}>
      {versionInfo && (
        <div className="absolute top-4 right-4 z-10">
          {versionInfo}
        </div>
      )}
      {children}
    </div>
  );
}