<template>
  <div class="container">
    <h1 class="title">Detalles del producto</h1>
    <ProductCardDetails
      :product="product"
      :related="related"
      :related-products="relatedProducts"
      :company="company"
    />
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
export default {
  setup() {
    definePageMeta({
      layout: 'mainbanner'
    })
  },
  data() {
    return {
      product: null,
      company: null,
      relatedProducts: null,
      related: false,
    }
  },
  async mounted() {
    try {
      const config = useRuntimeConfig()
      const $route = useRoute()
      this.product = await $fetch(`/products/${$route.params.id}/`, {
        baseURL: config.public.baseURL,
        method: 'GET',
      })

      if (this.product.company) {
        this.company = await $fetch(`/companies/${this.product.company.id}/`, {
          baseURL: config.public.baseURL,
          method: 'GET',
        })
      }

      this.relatedProducts = await $fetch(`/products/${this.product.id}/related/`, {
        baseURL: config.public.baseURL,
        method: 'GET',
      })
      this.related = this.relatedProducts.length > 0

      //return { product, company, relatedProducts, related }
    } catch (error) {
      console.error('Error fetching product details:', error)
    }
  },
  //TODO: meta data
  // mounted() {
  //   useHead({
  //     title: `latienda.coop | ${this.product.id}`,
  //     meta: [
  //       {
  //         hid: 'description',
  //         name: 'description',
  //         content: this.product.description,
  //       },
  //       { property: 'og:title', content: this.product.id },
  //       { property: 'og:description', content: this.product.description },
  //       { property: 'og:image', content: this.product.image },
  //       { property: 'og:url', content: this.product.url },
  //       { name: 'twitter:card', content: 'summary_large_image' },
  //     ],
  //   })
  // },
  
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;
  margin-bottom: 80px;
  @include mobile {
    margin-top: 80px;
  }
}

.title {
  margin-bottom: 40px;
  font-size: $xl;
  color: $color-navy;
}
</style>
