import { Link } from "@tanstack/react-router";
import { formatPrice, formatWeight } from "../lib/formatters";

interface SetupCardProps {
	id: number;
	name: string;
	itemCount: number;
	totalWeight: number;
	totalCost: number;
}

export function SetupCard({
	id,
	name,
	itemCount,
	totalWeight,
	totalCost,
}: SetupCardProps) {
	return (
		<Link
			to="/setups/$setupId"
			params={{ setupId: String(id) }}
			className="block w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
		>
			<div className="flex items-start justify-between mb-3">
				<h3 className="text-sm font-semibold text-gray-900 truncate">{name}</h3>
				<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 shrink-0">
					{itemCount} {itemCount === 1 ? "item" : "items"}
				</span>
			</div>
			<div className="flex flex-wrap gap-1.5">
				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
					{formatWeight(totalWeight)}
				</span>
				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
					{formatPrice(totalCost)}
				</span>
			</div>
		</Link>
	);
}