// File: src/components/UIX/PageContainer/PageContainer.jsx
// PageContainer Component - Full-page container with optional decorative elements

import React, { memo, useMemo } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";

/**
 * PageContainer Component - Performance Optimized
 * Full-page container with gradient background and optional decorative blobs
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes
 * - Memoized className strings
 *
 * @param {React.ReactNode} children - Page content
 * @param {boolean} showBlobs - Show decorative background blobs (default: false)
 * @param {boolean} flex - Use flex column layout (default: true)
 * @param {string} className - Additional CSS classes
 */
const PageContainer = memo(function PageContainer({
  children,
  showBlobs = false,
  flex = true,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgGradientPrimary: getThemeClasses("bg-gradient-primary"),
      decorativeBlob1: getThemeClasses("decorative-blob-1"),
      decorativeBlob2: getThemeClasses("decorative-blob-2"),
      decorativeBlob3: getThemeClasses("decorative-blob-3"),
    }),
    [getThemeClasses],
  );

  // Memoize container className
  const containerClassName = useMemo(() => {
    const classes = [
      "min-h-screen",
      themeClasses.bgGradientPrimary,
    ];

    if (flex) {
      classes.push("flex", "flex-col");
    }

    if (className) {
      classes.push(className);
    }

    return classes.join(" ");
  }, [themeClasses.bgGradientPrimary, flex, className]);

  // Memoize decorative blobs
  const decorativeBlobs = useMemo(() => {
    if (!showBlobs) return null;

    return (
      <>
        <div className={themeClasses.decorativeBlob1}></div>
        <div className={themeClasses.decorativeBlob2}></div>
        <div className={themeClasses.decorativeBlob3}></div>
      </>
    );
  }, [showBlobs, themeClasses]);

  return (
    <div className={containerClassName}>
      {decorativeBlobs}
      {children}
    </div>
  );
});

PageContainer.displayName = "PageContainer";

export default PageContainer;
