Mana-Loop/src/components/game/tabs/LootTab.tsx

'use client';

import { useGameStore } from '@/lib/game/stores';
import { LootInventoryDisplay } from '@/components/game/LootInventory';

export function LootTab() {
  const lootInventory = useGameStore((s) => s.lootInventory);
  const elements = useGameStore((s) => s.elements);
  const equipmentInstances = useGameStore((s) => s.equipmentInstances);
  const deleteMaterial = useGameStore((s) => s.deleteMaterial);
  const deleteEquipmentInstance = useGameStore((s) => s.deleteEquipmentInstance);

  return (
    <div className="space-y-4">
      <LootInventoryDisplay
        inventory={lootInventory}
        elements={elements}
        equipmentInstances={equipmentInstances}
        onDeleteMaterial={deleteMaterial}
        onDeleteEquipment={deleteEquipmentInstance}
      />
    </div>
  );
}

LootTab.displayName = "LootTab";