<template>
  <div v-if="product">
      <!-- breadcrumb start -->
      <product-details-breadcrumb :product="product" />
      <!-- breadcrumb end -->

      <!-- product details area start -->
      <product-details-area :product="product" />
      <!-- product details area end -->

      <!-- related products start -->
      <!-- <product-related :product-id="product.id" :category="product.category.name" /> -->
      <!-- related products end -->
  </div>
</template>

<script setup lang="ts">
import product_data from '@/data/product-data';
import type { ProductInterface } from '@/pinia/products/interfaces/products.interface';
import { useProductsStore } from '@/pinia/products/products.store';
const route = useRoute()

const productsStore = useProductsStore();

// let product = ref<ProductInterface>();

// if(route.params && !productsStore.product) {
//   if(route.params && !isNaN(+route.params.id)) {
//     // product.value = await productsStore.getProduct(route.params.id);
//   } else {
//     navigateTo('/404');
//   }
// }
const {data: product} = await useAsyncData('product', async () => {
  return await productsStore.getProduct(route.params.id)
})


useSeoMeta({ title: product.value ? product.value.name : 'Producto' });

</script>
