Game-Server/client/src/views/GameInterface/tabs/components/ItemModal.jsx

import React from "react";
import "./ItemModal.css";

const ItemModal = ({
  item,
  onClose,
  onEquip,
  onUnequip,
  isEquipped,
  getStatIcon,
  formatStatName,
}) => {
  if (!item) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          &times;
        </button>

        <div className="details-view">
          <div className="details-header">
            <h4 className={`item-name ${item.rarity}`}>
              {item.displayName || item.name}
            </h4>
            <span className={`rarity-badge ${item.rarity}`}>{item.rarity}</span>
          </div>

          <p className="item-description">{item.description}</p>

          <div className="item-stats-container">
            {item.stats &&
              Object.entries(item.stats).map(([statName, value]) => (
                <div key={statName} className="stat-row">
                  <span className="stat-label">
                    <i className={getStatIcon?.(statName)}></i>{" "}
                    {formatStatName
                      ? formatStatName(statName)
                      : statName.toUpperCase()}
                  </span>
                  <span className="stat-value">+{value}</span>
                </div>
              ))}
          </div>

          {isEquipped ? (
            <button
              className="btn-equip unequip"
              onClick={() => {
                onUnequip(item.currentSlot);
                onClose();
              }}
            >
              DISCONNECT_SYSTEM
            </button>
          ) : (
            item.canEquip && (
              <button
                className="btn-equip"
                onClick={() => {
                  onEquip(item);
                  onClose();
                }}
              >
                INITIALIZE_EQUIP
              </button>
            )
          )}
        </div>
      </div>
    </div>
  );
};

export default ItemModal;