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

interface SetupCardProps {
	id: number;
	name: string;
	visibility?: "private" | "link" | "public";
	itemCount: number;
	totalWeight: number;
	totalCost: number;
}

export function SetupCard({
	id,
	name,
	visibility,
	itemCount,
	totalWeight,
	totalCost,
}: SetupCardProps) {
	const { weight, price } = useFormatters();
	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">
				<div className="flex items-center gap-1.5 min-w-0">
					<h3 className="text-sm font-semibold text-gray-900 truncate">
						{name}
					</h3>
					{visibility && visibility !== "private" && (
						<span
							className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium shrink-0 ${
								visibility === "public"
									? "bg-green-50 text-green-600"
									: "bg-blue-50 text-blue-600"
							}`}
						>
							{visibility === "public" ? "Public" : "Link"}
						</span>
					)}
				</div>
				<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400 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-400">
					{weight(totalWeight)}
				</span>
				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
					{price(totalCost)}
				</span>
			</div>
		</Link>
	);
}