// File: src/components/UI/Card/Card.jsx
// Card Component - Performance Optimized

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

/**
 * Card Component - Performance Optimized
 * Container component for grouping related content
 *
 * @param {React.ReactNode} children - Card content
 * @param {string} className - Additional CSS classes
 * @param {string} padding - Padding size
 * @param {function} onClick - Click handler
 */
const Card = memo(
  function Card({ children, className = "", padding = "p-8", onClick, ...rest }) {
    const { getThemeClasses } = useUIXTheme();

    // Memoize theme classes with single retrieval
    const themeClasses = useMemo(
      () => ({
        bg: getThemeClasses("bg-card"),
        border: getThemeClasses("card-border"),
      }),
      [getThemeClasses],
    );

    // Memoize the complete className
    const cardClasses = useMemo(() => {
      const classes = [
        themeClasses.bg,
        "rounded-xl",
        "shadow-lg",
        "border",
        themeClasses.border,
        padding,
      ];

      if (className) {
        classes.push(className);
      }

      return classes.filter(Boolean).join(" ");
    }, [themeClasses, padding, className]);

    return <div className={cardClasses} onClick={onClick} {...rest}>{children}</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison function - only re-render when these props change
    return (
      prevProps.className === nextProps.className &&
      prevProps.padding === nextProps.padding &&
      prevProps.children === nextProps.children &&
      prevProps.onClick === nextProps.onClick
    );
  },
);

// Display name for debugging
Card.displayName = "Card";

// Export aliases for backward compatibility
export const Panel = Card;
export const Box = Card;

export default Card;
