import { Link } from "@tanstack/react-router";
import { formatWeight, formatPrice } 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>
  );
}