more stuff

src/components/ProductCard.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
+import { Product } from '@/mock/product';
 
 interface ProductCardProps {
-  product: {
-    id: string;
-    name: string;
-    description: string;
-    image_url: string;
-    brand: { name: string };
-    category: { name: string };
-    restrictions: string[];
-    offers: Array<{ price: number; vendor: { name: string } }>;
-  };
+  product: Product;
+}
+
+function getRestrictionFlags(restrictions?: Product['restrictions']): string[] {
+  const flags: string[] = [];
+  if (restrictions?.nfa) flags.push('NFA');
+  if (restrictions?.sbr) flags.push('SBR');
+  if (restrictions?.suppressor) flags.push('SUPPRESSOR');
+  if (restrictions?.stateRestrictions && restrictions.stateRestrictions.length > 0) flags.push('STATE_RESTRICTIONS');
+  return flags;
 }
 
 export default function ProductCard({ product }: ProductCardProps) {
@@ -89,9 +91,9 @@ export default function ProductCard({ product }: ProductCardProps) {
           className="w-full h-48 object-cover"
           onError={() => setImageError(true)}
         />
-        {product.restrictions && product.restrictions.length > 0 && (
+        {getRestrictionFlags(product.restrictions).length > 0 && (
           <div className="absolute top-2 left-2 flex flex-wrap gap-1">
-            {product.restrictions.map((restriction) => (
+            {getRestrictionFlags(product.restrictions).map((restriction) => (
               <RestrictionBadge key={restriction} restriction={restriction} />
             ))}
           </div>
@@ -109,9 +111,11 @@ export default function ProductCard({ product }: ProductCardProps) {
         
         <div className="flex items-center justify-between">
           <span className="text-xs text-base-content/50">{product.category.name}</span>
-          <button className="btn btn-primary btn-sm">
-            View Details
-          </button>
+          <Link href={`/products/${product.id}`} legacyBehavior>
+            <a className="btn btn-primary btn-sm">
+              View Details
+            </a>
+          </Link>
         </div>
       </div>
     </div>