import { Link } from "@tanstack/react-router";
import { useFormatters } from "../hooks/useFormatters";
import { GearImage, imageContainerBg } from "./GearImage";

interface GlobalItemCardProps {
	id: number;
	brand: string;
	model: string;
	category: string | null;
	weightGrams: number | null;
	priceCents: number | null;
	imageUrl: string | null;
	dominantColor?: string | null;
	cropZoom?: number | null;
	cropX?: number | null;
	cropY?: number | null;
}

export function GlobalItemCard({
	id,
	brand,
	model,
	category,
	weightGrams,
	priceCents,
	imageUrl,
	dominantColor,
	cropZoom,
	cropX,
	cropY,
}: GlobalItemCardProps) {
	const { weight, price } = useFormatters();

	return (
		<Link
			to="/global-items/$globalItemId"
			params={{ globalItemId: String(id) }}
			className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
		>
			<div
				className="aspect-[4/3] overflow-hidden"
				style={{
					backgroundColor: imageUrl
						? imageContainerBg(dominantColor)
						: undefined,
				}}
			>
				{imageUrl ? (
					<GearImage
						src={imageUrl}
						alt={`${brand} ${model}`}
						dominantColor={dominantColor}
						cropZoom={cropZoom}
						cropX={cropX}
						cropY={cropY}
					/>
				) : (
					<div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center">
						<svg
							className="w-9 h-9 text-gray-300"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={1.5}
								d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
							/>
						</svg>
					</div>
				)}
			</div>
			<div className="p-4">
				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
					{brand}
				</p>
				<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
					{model}
				</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">
							{weight(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-500">
							{price(priceCents)}
						</span>
					)}
					{category && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
							{category}
						</span>
					)}
				</div>
			</div>
		</Link>
	);
}
