GearBox/src/client/components/ItemCard.tsx

import { formatWeight, formatPrice } from "../lib/formatters";
import { useUIStore } from "../stores/uiStore";

interface ItemCardProps {
  id: number;
  name: string;
  weightGrams: number | null;
  priceCents: number | null;
  categoryName: string;
  categoryEmoji: string;
  imageFilename: string | null;
}

export function ItemCard({
  id,
  name,
  weightGrams,
  priceCents,
  categoryName,
  categoryEmoji,
  imageFilename,
}: ItemCardProps) {
  const openEditPanel = useUIStore((s) => s.openEditPanel);

  return (
    <button
      type="button"
      onClick={() => openEditPanel(id)}
      className="w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden"
    >
      {imageFilename && (
        <div className="aspect-[4/3] bg-gray-50">
          <img
            src={`/uploads/${imageFilename}`}
            alt={name}
            className="w-full h-full object-cover"
          />
        </div>
      )}
      <div className="p-4">
        <h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
          {name}
        </h3>
        <div className="flex flex-wrap gap-1.5">
          {weightGrams != null && (
            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
              {formatWeight(weightGrams)}
            </span>
          )}
          {priceCents != null && (
            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
              {formatPrice(priceCents)}
            </span>
          )}
          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
            {categoryEmoji} {categoryName}
          </span>
        </div>
      </div>
    </button>
  );
}