import { Link } from "@tanstack/react-router";
import { LucideIcon } from "../lib/iconData";

interface DashboardCardProps {
	to: string;
	search?: Record<string, string>;
	title: string;
	icon: string;
	stats: Array<{ label: string; value: string }>;
	emptyText?: string;
}

export function DashboardCard({
	to,
	search,
	title,
	icon,
	stats,
	emptyText,
}: DashboardCardProps) {
	const allZero = stats.every(
		(s) => s.value === "0" || s.value === "$0.00" || s.value === "0g",
	);

	return (
		<Link
			to={to}
			search={search}
			className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-6"
		>
			<div className="flex items-center gap-3 mb-4">
				<LucideIcon name={icon} size={24} className="text-gray-500" />
				<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
			</div>
			<div className="space-y-1.5">
				{stats.map((stat) => (
					<div key={stat.label} className="flex items-center justify-between">
						<span className="text-sm text-gray-500">{stat.label}</span>
						<span className="text-sm font-medium text-gray-700">
							{stat.value}
						</span>
					</div>
				))}
			</div>
			{allZero && emptyText && (
				<p className="mt-4 text-sm text-gray-500 font-medium">{emptyText}</p>
			)}
		</Link>
	);
}