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

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

// Move constants outside component to prevent recreation
const SIZE_CLASSES = {
  md: {
    container: "p-2.5",
    icon: "h-6 w-6 sm:h-8 sm:w-8",
  },
  lg: {
    container: "p-3",
    icon: "h-8 w-8 sm:h-10 sm:w-10",
  },
  xl: {
    container: "p-4",
    icon: "h-10 w-10 sm:h-12 sm:w-12",
  },
};

/**
 * DetailPageIcon Component
 * Theme-aware icon display for detail page headers with gradient background
 * Provides consistent styling for page title icons in detail views
 *
 * @param {React.ComponentType} icon - Heroicon component to display
 * @param {string} className - Additional CSS classes for the container
 * @param {string} size - Icon size (md, lg, xl)
 * @param {boolean} gradient - Whether to use gradient background (default: true)
 */
const DetailPageIcon = memo(
  ({ icon: Icon, className = "", size = "lg", gradient = true }) => {
    const { getThemeClasses } = useUIXTheme();

    // Early return if no icon provided
    if (!Icon) {
      return null;
    }

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        bgGradientSecondary: getThemeClasses("bg-gradient-secondary"),
      }),
      [getThemeClasses],
    );

    // Get size classes from constant
    const sizeConfig = SIZE_CLASSES[size] || SIZE_CLASSES.lg;

    // Memoize container classes
    const containerClasses = useMemo(
      () =>
        `
    ${sizeConfig.container}
    rounded-2xl shadow-lg mr-4 flex-shrink-0
    ${themeClasses.bgGradientSecondary}
    ${className}
  `
          .replace(/\s+/g, " ")
          .trim(),
      [sizeConfig.container, themeClasses.bgGradientSecondary, className],
    );

    // Memoize icon classes - white icon on themed gradient background
    const iconClasses = useMemo(
      () => `${sizeConfig.icon} text-white`,
      [sizeConfig.icon],
    );

    return (
      <div className={containerClasses}>
        <Icon className={iconClasses} />
      </div>
    );
  },
);

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

export default DetailPageIcon;
