import Link from "next/link";

export default function SearchResultCard({ item, bestScore }) {
  const isModel = item.type === "model";
  const href = isModel
    ? `/model/${item.slug ?? item.id}`
    : `/part/${item.sku ?? item.id}`;

  // Determine if this is the “best match”
  const isBestMatch =
    bestScore != null && item.score != null && item.score >= bestScore - 0.02; // 2% threshold

  const placeholderImg = `https://placehold.co/400x250?text=${encodeURIComponent(
    item.name
  )}`;

  return (
    <Link
      href={href}
      className="block border rounded-xl p-5 shadow-sm hover:shadow-md hover:-translate-y-1 transition bg-white"
    >
      {/* Best Match Badge */}
      {isBestMatch && (
        <div className="inline-block mb-2 px-3 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">
          Best Match
        </div>
      )}

      <img
        src={placeholderImg}
        alt={item.name}
        className="rounded mb-4 w-full object-cover"
      />

      <h3 className="text-lg font-bold mb-1">{item.name}</h3>

      <span
        className={`inline-block px-3 py-1 text-xs rounded-full capitalize ${
          isModel
            ? "bg-purple-100 text-purple-700"
            : "bg-blue-100 text-blue-700"
        }`}
      >
        {isModel ? "Model" : "Part"}
      </span>

      <p className="mt-3 text-sm text-gray-500 font-mono">
        {isModel ? item.slug ?? item.id : item.sku ?? item.id}
      </p>
    </Link>
  );
}