fuzzy search logic

src/app/components/SearchResultCard.js

@@ -1,8 +1,14 @@
 import Link from "next/link";
 
-export default function SearchResultCard({ item }) {
-  const isModel = !!item.categories; // Models have .categories
-  const href = isModel ? `/model/${item.id}` : `/part/${item.id}`;
+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
@@ -13,17 +19,21 @@ export default function SearchResultCard({ item }) {
       href={href}
       className="block border rounded-xl p-5 shadow-sm hover:shadow-md hover:-translate-y-1 transition bg-white"
     >
-      {/* Image */}
+      {/* 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"
       />
 
-      {/* Name */}
       <h3 className="text-lg font-bold mb-1">{item.name}</h3>
 
-      {/* Type Tag */}
       <span
         className={`inline-block px-3 py-1 text-xs rounded-full capitalize ${
           isModel
@@ -34,9 +44,8 @@ export default function SearchResultCard({ item }) {
         {isModel ? "Model" : "Part"}
       </span>
 
-      {/* Extra meta */}
-      <p className="mt-3 text-sm text-gray-500">
-        ID: <span className="font-mono">{item.id}</span>
+      <p className="mt-3 text-sm text-gray-500 font-mono">
+        {isModel ? item.slug ?? item.id : item.sku ?? item.id}
       </p>
     </Link>
   );