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

import React, { useMemo, memo } from "react";

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

// Static style objects
const BACKGROUND_STYLES = {
  solid: { backgroundColor: "#172554" }, // blue-950
  gradient: { background: "linear-gradient(135deg, #172554 0%, #1e3a8a 100%)" },
};

/**
 * EmptyStateIcon Component
 * Blue-themed icon display for empty states with gradient background
 * Provides consistent styling for "no items found" scenarios
 *
 * @param {React.ComponentType} icon - Heroicon component to display
 * @param {string} className - Additional CSS classes for the container
 * @param {string} size - Icon size (sm, md, lg, xl)
 * @param {boolean} gradient - Whether to use gradient background (default: true)
 */
const EmptyStateIcon = memo(
  ({ icon: Icon, className = "", size = "lg", gradient = true, ...props }) => {
    // Early return if no icon provided
    if (!Icon) {
      return null;
    }

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

    // Memoize container classes
    const containerClasses = useMemo(
      () =>
        `${sizeConfig.container} rounded-2xl shadow-lg mx-auto w-fit mb-4 ${className}`.trim(),
      [sizeConfig.container, className],
    );

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

    // Memoize background style
    const backgroundStyle = useMemo(
      () => (gradient ? BACKGROUND_STYLES.gradient : BACKGROUND_STYLES.solid),
      [gradient],
    );

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

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

export default EmptyStateIcon;
