// File: src/components/UIX/InfoBox/InfoBox.jsx
// InfoBox Component - Reusable information display box

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

/**
 * InfoBox Component - Performance Optimized
 * Displays information with an optional icon in a styled box
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes
 * - Memoized className strings
 *
 * @param {React.Component} icon - Icon component to display
 * @param {string} label - Label text
 * @param {string} value - Value text
 * @param {string} className - Additional CSS classes
 */
const InfoBox = memo(function InfoBox({
  icon: Icon,
  label,
  value,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgCard: getThemeClasses("bg-card"),
      borderSecondary: getThemeClasses("border-secondary"),
      textSecondary: getThemeClasses("text-secondary"),
      textPrimary: getThemeClasses("text-primary"),
    }),
    [getThemeClasses],
  );

  // Memoize container className
  const containerClassName = useMemo(() => {
    return `p-4 rounded-lg border ${themeClasses.bgCard} ${themeClasses.borderSecondary} ${className}`;
  }, [themeClasses, className]);

  return (
    <div className={containerClassName}>
      <div className="flex items-center">
        {Icon && (
          <Icon className={`h-5 w-5 mr-3 ${themeClasses.textSecondary}`} />
        )}
        <div className="flex-1">
          {label && (
            <p className={`text-sm font-medium ${themeClasses.textSecondary}`}>
              {label}
            </p>
          )}
          {value && (
            <p className={`text-sm ${themeClasses.textPrimary} font-mono`}>
              {value}
            </p>
          )}
        </div>
      </div>
    </div>
  );
});

InfoBox.displayName = "InfoBox";

export default InfoBox;
