// File Path: web/frontend/src/components/UIX/DetailCard/DetailCard.jsx

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

// Constants 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",
};

/**
 * DetailCard Component
 * Blue-themed card for displaying information on detail pages
 * Provides consistent styling for information display sections
 *
 * @param {string} title - Card title
 * @param {React.ComponentType} icon - Icon component for header
 * @param {React.ReactNode} children - Card content
 * @param {string} className - Additional CSS classes for the container
 * @param {string} maxWidth - Maximum width constraint (2xl, 3xl, 4xl, 5xl, full)
 * @param {boolean} gradient - Whether to use gradient background in header (default: true)
 */
const DetailCard = memo(
  ({
    title,
    icon: Icon,
    children,
    className = "",
    maxWidth = "4xl",
    gradient = true,
    ...props
  }) => {
    const { getThemeClasses } = useUIXTheme();

    // Memoize theme classes to prevent repeated calls
    const themeClasses = useMemo(
      () => ({
        bgCard: getThemeClasses("bg-card"),
        cardBorder: getThemeClasses("card-border"),
        buttonPrimary: gradient ? null : getThemeClasses("button-primary"),
        bgGradientSecondary: gradient
          ? getThemeClasses("bg-gradient-secondary")
          : null,
      }),
      [getThemeClasses, gradient],
    );

    // Memoize the max width class
    const maxWidthClass = useMemo(
      () => MAX_WIDTH_CLASSES[maxWidth] || MAX_WIDTH_CLASSES["4xl"],
      [maxWidth],
    );

    // Memoize header classes based on gradient prop
    const headerClasses = useMemo(() => {
      if (!gradient) {
        return themeClasses.buttonPrimary;
      }
      return themeClasses.bgGradientSecondary;
    }, [
      gradient,
      themeClasses.buttonPrimary,
      themeClasses.bgGradientSecondary,
    ]);

    // Memoize container classes
    const containerClasses = useMemo(
      () => `${maxWidthClass} mx-auto ${className}`.trim(),
      [maxWidthClass, className],
    );

    // Memoize card classes
    const cardClasses = useMemo(
      () =>
        `${themeClasses.bgCard} shadow-xl rounded-2xl overflow-hidden border ${themeClasses.cardBorder} hover:shadow-2xl transition-shadow duration-300`.trim(),
      [themeClasses.bgCard, themeClasses.cardBorder],
    );

    // Memoize header content
    const headerContent = useMemo(() => {
      if (!title) return null;

      return (
        <div className={`px-6 py-4 ${headerClasses}`}>
          <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>
        </div>
      );
    }, [title, Icon, headerClasses]);

    return (
      <div className={containerClasses} {...props}>
        <div className={cardClasses}>
          {/* Header */}
          {headerContent}

          {/* Content */}
          <div className="p-6">{children}</div>
        </div>
      </div>
    );
  },
);

// Add display name for better debugging
DetailCard.displayName = "DetailCard";

export default DetailCard;
