// File: src/components/UI/Form/FormCard.jsx

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

// Move static object outside component to prevent recreation
const MAX_WIDTH_CLASSES = {
  "2xl": "max-w-2xl",
  "3xl": "max-w-3xl",
  "4xl": "max-w-4xl",
  "5xl": "max-w-5xl",
  "6xl": "max-w-6xl",
  "7xl": "max-w-7xl",
  full: "max-w-full",
};

/**
 * FormCard Component - Performance Optimized
 * Card container with header, content, and actions sections
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Static object moved outside component
 * - Memoized theme classes and sections
 * - Optimized className concatenation
 * - Prevented unnecessary re-renders
 *
 * @param {string} title - Card title
 * @param {string} subtitle - Card subtitle
 * @param {React.Component} icon - Icon component
 * @param {React.ReactNode} children - Card content
 * @param {React.ReactNode} actions - Card actions
 * @param {string} className - Additional CSS classes
 * @param {string} maxWidth - Maximum width preset
 * @param {boolean} allowOverflow - Allow content overflow
 */
const FormCard = memo(function FormCard({
  title,
  subtitle,
  icon: Icon,
  children,
  actions,
  className = "",
  maxWidth = "4xl",
  allowOverflow = false,
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize all theme classes to prevent multiple calls on each render
  const themeClasses = useMemo(
    () => ({
      bgCard: getThemeClasses("bg-card"),
      cardBorder: getThemeClasses("card-border"),
      bgGradientSecondary: getThemeClasses("bg-gradient-secondary"),
      bgGradientPrimary: getThemeClasses("bg-gradient-primary"),
    }),
    [getThemeClasses],
  );

  // Memoize container className
  const containerClassName = useMemo(() => {
    const widthClass = MAX_WIDTH_CLASSES[maxWidth] || MAX_WIDTH_CLASSES["4xl"];
    const classes = [widthClass, "mx-auto"];
    if (className) classes.push(className);
    return classes.join(" ");
  }, [maxWidth, className]);

  // Memoize card className
  const cardClassName = useMemo(() => {
    const classes = [
      themeClasses.bgCard,
      "shadow-xl",
      "rounded-2xl",
      "border",
      themeClasses.cardBorder,
      "hover:shadow-2xl",
      "transition-shadow",
      "duration-300",
    ];
    if (!allowOverflow) classes.push("overflow-hidden");
    return classes.join(" ");
  }, [themeClasses.bgCard, themeClasses.cardBorder, allowOverflow]);

  // Memoize header section
  const headerSection = useMemo(() => {
    if (!title && !Icon) return null;

    return (
      <div
        className={`px-6 py-4 rounded-t-2xl ${themeClasses.bgGradientSecondary}`}
      >
        <h2 className="text-base font-bold text-white uppercase tracking-wider flex items-center">
          {Icon && <Icon className="w-5 h-5 mr-2" />}
          {title}
        </h2>
        {subtitle && <p className="text-sm text-white/80 mt-1">{subtitle}</p>}
      </div>
    );
  }, [title, subtitle, Icon, themeClasses.bgGradientSecondary]);

  // Memoize content section
  const contentSection = useMemo(() => {
    if (!children) return null;

    return <div className="p-6">{children}</div>;
  }, [children]);

  // Memoize actions section
  const actionsSection = useMemo(() => {
    if (!actions) return null;

    return (
      <div
        className={`px-6 py-4 border-t ${themeClasses.cardBorder} ${themeClasses.bgGradientPrimary}`}
      >
        {actions}
      </div>
    );
  }, [actions, themeClasses.cardBorder, themeClasses.bgGradientPrimary]);

  return (
    <div className={containerClassName}>
      <div className={cardClassName}>
        {headerSection}
        {contentSection}
        {actionsSection}
      </div>
    </div>
  );
});

// Set display name for React DevTools
FormCard.displayName = "FormCard";

export default FormCard;
