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

interface PublicSetupCardProps {
	setup: {
		id: number;
		name: string;
		createdAt: string;
	};
}

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"
		>
			<h3 className="text-sm font-semibold text-gray-900 truncate">
				{setup.name}
			</h3>
			<p className="text-xs text-gray-400 mt-1">{formattedDate}</p>
		</Link>
	);
}
