import Link from "next/link";

interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 1, name: "Product 1", price: 50 },
  { id: 2, name: "Product 2", price: 30 },
  { id: 3, name: "Product 3", price: 20 },
];

export default function Shop() {
  return (
    <main className="container mx-auto p-8">
      <h2 className="text-2xl font-bold mb-4">Shop</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {products.map((p) => (
          <div
            key={p.id}
            className="border rounded p-4 shadow hover:shadow-lg transition"
          >
            <h3 className="font-semibold">{p.name}</h3>
            <p className="text-gray-700">${p.price}</p>
            <Link
              href={`/builder/site-1/product/${p.id}`}
              className="text-blue-600 hover:underline mt-2 inline-block"
            >
              View Product
            </Link>
          </div>
        ))}
      </div>
    </main>
  );
}