<template>
    <div>
      <h1>Product Details</h1>
      <div>
        <h2>{{ product.name }}</h2>
        <p>{{ product.description }}</p>
        <p>Price: {{ product.price }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import Navbar from '../components/FBWNavbar.vue';
  import Footer from '../components/FBWFooter.vue';
  
  const route = useRoute();
  const product = ref({ name: '', description: '', price: 0 });
  
  onMounted(() => {
    // Fetch product details based on route params
    const productId = route.params.id;
    // Sample fetch code
    product.value = { name: 'Product ' + productId, description: 'Description for product ' + productId, price: 100 * productId };
  });
  </script>
  