project_vollidioten_website/components/InventoryGrid.tsx

import React, { useState } from 'react';
import { Item } from '../types';
import { ItemIcon } from './IconSet';

interface InventoryGridProps {
  items: (Item | null)[];
}

const InventoryGrid: React.FC<InventoryGridProps> = ({ items }) => {
  return (
    <div className="bg-surface rounded-xl border border-border p-4 shadow-card">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-sm font-bold uppercase tracking-wider text-textMuted">Inventar</h3>
        <div className="text-xs text-textMuted bg-surfaceHighlight px-2 py-1 rounded">
          {items.filter(i => i !== null).length} / {items.length} Plätze
        </div>
      </div>
      
      <div className="grid grid-cols-5 sm:grid-cols-9 gap-2">
        {items.map((item, index) => (
          <div 
            key={index} 
            className="group relative aspect-square bg-surfaceHighlight/50 border border-white/5 rounded-md transition-all duration-200 hover:scale-105 hover:bg-surfaceHighlight hover:border-accentInfo/30 hover:shadow-glow hover:z-10 cursor-pointer flex items-center justify-center"
          >
            {item ? (
              <>
                <div className="w-8 h-8 text-textMuted group-hover:text-accentInfo transition-colors">
                  <ItemIcon type={item.type} />
                </div>
                
                {/* Count Badge */}
                {item.count > 1 && (
                  <span className="absolute bottom-1 right-1 font-mono text-[10px] font-bold text-textMain leading-none drop-shadow-md">
                    {item.count}
                  </span>
                )}

                {/* Tooltip */}
                <div className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-[150px] z-50 pointer-events-none">
                  <div className="bg-surface border border-border rounded p-2 shadow-xl text-xs">
                    <div className={`font-semibold ${item.rarity === 'epic' ? 'text-accentInfo' : 'text-textMain'}`}>
                      {item.name}
                    </div>
                    {item.nbtSummary && (
                      <div className="text-[10px] text-textMuted mt-1 border-t border-white/10 pt-1">
                        {item.nbtSummary}
                      </div>
                    )}
                  </div>
                </div>
              </>
            ) : (
              // Empty slot styling
              <div className="absolute inset-2 border border-dashed border-white/5 rounded-sm" />
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default InventoryGrid;