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 },
];

interface ProductProps {
  params: { id: string };
}

export default function Product({ params }: ProductProps) {
  const product = products.find((p) => p.id === parseInt(params.id));
  if (!product) return <div className="p-8">Product not found</div>;

  return (
    <main className="container mx-auto p-8">
      <div className="border rounded p-6 shadow">
        <h2 className="text-2xl font-bold mb-2">{product.name}</h2>
        <p className="text-gray-700 mb-4">Price: ${product.price}</p>
        <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
          Add to Cart
        </button>
      </div>
    </main>
  );
}