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

// Move static default values outside component to prevent recreation
const DEFAULT_TITLE = "Search Criteria";

/**
 * SearchCriteriaPills Component - Performance Optimized
 * Display search criteria as pills with icons and values
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Static default values moved outside component
 * - Memoized className strings to prevent re-concatenation
 * - Memoized title section
 * - Memoized pills rendering
 * - Prevented unnecessary re-renders
 *
 * @param {Array} criteria - Array of criteria objects: [{ icon, label, value }]
 * @param {string} className - Additional CSS classes for container
 * @param {string} pillClassName - Additional CSS classes for individual pills
 * @param {boolean} showTitle - Whether to show the title
 * @param {string} title - Title text
 */
const SearchCriteriaPills = memo(function SearchCriteriaPills({
  criteria = [],
  className = "",
  pillClassName = "",
  showTitle = true,
  title = DEFAULT_TITLE
}) {
  const { getThemeClasses } = useUIXTheme();

  // Early return for empty criteria
  if (!criteria || criteria.length === 0) {
    return null;
  }

  // Memoize container className
  const containerClassName = useMemo(() => {
    return className ? `mb-6 ${className}` : 'mb-6';
  }, [className]);

  // Memoize pill base className
  const pillBaseClassName = useMemo(() => {
    const baseClasses = `inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-sm sm:text-base font-semibold ${getThemeClasses("pill-bg")} ${getThemeClasses("pill-text")} border ${getThemeClasses("pill-border")}`;
    return pillClassName ? `${baseClasses} ${pillClassName}` : baseClasses;
  }, [pillClassName, getThemeClasses]);

  // Memoize title section
  const titleSection = useMemo(() => {
    if (!showTitle) return null;

    return (
      <h3 className="text-lg font-semibold text-gray-800 mb-3">
        {title}
      </h3>
    );
  }, [showTitle, title]);

  // Memoize pills rendering
  const pillsList = useMemo(() => {
    return criteria.map((criteriaItem, index) => {
      const Icon = criteriaItem.icon;
      return (
        <span key={index} className={pillBaseClassName}>
          {Icon && <Icon className="h-4 w-4 sm:h-5 sm:w-5 mr-2" />}
          <span className="truncate max-w-[150px] sm:max-w-none">
            {criteriaItem.label}: "{criteriaItem.value}"
          </span>
        </span>
      );
    });
  }, [criteria, pillBaseClassName]);

  return (
    <div className={containerClassName}>
      {titleSection}
      <div className="flex flex-wrap gap-2 sm:gap-3">
        {pillsList}
      </div>
    </div>
  );
});

// Set display name for React DevTools
SearchCriteriaPills.displayName = 'SearchCriteriaPills';

export default SearchCriteriaPills;