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

interface PublicSetupCardProps {
	setup: {
		id: number;
		name: string;
		createdAt: string;
		itemCount?: number;
		creatorName?: string | null;
	};
}

export function PublicSetupCard({ setup }: PublicSetupCardProps) {
	const formattedDate = new Date(setup.createdAt).toLocaleDateString(
		undefined,
		{
			year: "numeric",
			month: "short",
			day: "numeric",
		},
	);

	return (
		<Link
			to="/setups/$setupId"
			params={{ setupId: String(setup.id) }}
			className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4 cursor-pointer"
		>
			<h3 className="text-sm font-semibold text-gray-900 truncate">
				{setup.name}
			</h3>
			{setup.creatorName && (
				<p className="text-xs text-gray-400 mt-0.5">by {setup.creatorName}</p>
			)}
			<div className="flex items-center justify-between mt-2">
				<div className="flex items-center gap-2">
					{setup.itemCount != null && setup.itemCount > 0 && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
							{setup.itemCount} {setup.itemCount === 1 ? "item" : "items"}
						</span>
					)}
				</div>
				<p className="text-xs text-gray-400">{formattedDate}</p>
			</div>
		</Link>
	);
}
