GearBox/src/client/components/ItemCard.tsx

import { useCurrency } from "../hooks/useCurrency";
import { useWeightUnit } from "../hooks/useWeightUnit";
import { formatPrice, formatWeight } from "../lib/formatters";
import { LucideIcon } from "../lib/iconData";
import { useUIStore } from "../stores/uiStore";
import { ClassificationBadge } from "./ClassificationBadge";

interface ItemCardProps {
	id: number;
	name: string;
	weightGrams: number | null;
	priceCents: number | null;
	categoryName: string;
	categoryIcon: string;
	imageFilename: string | null;
	productUrl?: string | null;
	onRemove?: () => void;
	classification?: string;
	onClassificationCycle?: () => void;
}

export function ItemCard({
	id,
	name,
	weightGrams,
	priceCents,
	categoryName,
	categoryIcon,
	imageFilename,
	productUrl,
	onRemove,
	classification,
	onClassificationCycle,
}: ItemCardProps) {
	const unit = useWeightUnit();
	const currency = useCurrency();
	const openEditPanel = useUIStore((s) => s.openEditPanel);
	const openExternalLink = useUIStore((s) => s.openExternalLink);

	return (
		<button
			type="button"
			onClick={() => openEditPanel(id)}
			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
		>
			{productUrl && (
				<span
					role="button"
					tabIndex={0}
					onClick={(e) => {
						e.stopPropagation();
						openExternalLink(productUrl);
					}}
					onKeyDown={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							e.stopPropagation();
							openExternalLink(productUrl);
						}
					}}
					className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
					title="Open product link"
				>
					<svg
						className="w-3.5 h-3.5"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
						/>
					</svg>
				</span>
			)}
			{onRemove && (
				<span
					role="button"
					tabIndex={0}
					onClick={(e) => {
						e.stopPropagation();
						onRemove();
					}}
					onKeyDown={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							e.stopPropagation();
							onRemove();
						}
					}}
					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
					title="Remove from setup"
				>
					<svg
						className="w-3.5 h-3.5"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M6 18L18 6M6 6l12 12"
						/>
					</svg>
				</span>
			)}
			<div className="aspect-[4/3] bg-gray-50">
				{imageFilename ? (
					<img
						src={`/uploads/${imageFilename}`}
						alt={name}
						className="w-full h-full object-cover"
					/>
				) : (
					<div className="w-full h-full flex flex-col items-center justify-center">
						<LucideIcon
							name={categoryIcon}
							size={36}
							className="text-gray-400"
						/>
					</div>
				)}
			</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-400">
							{formatWeight(weightGrams, unit)}
						</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-500">
							{formatPrice(priceCents, currency)}
						</span>
					)}
					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
						<LucideIcon
							name={categoryIcon}
							size={14}
							className="inline-block mr-1 text-gray-500"
						/>{" "}
						{categoryName}
					</span>
					{classification && onClassificationCycle && (
						<ClassificationBadge
							classification={classification}
							onCycle={onClassificationCycle}
						/>
					)}
				</div>
			</div>
		</button>
	);
}