<template>
  <div class="product" v-if="product">
    <ui-title>{{ product?.name }}</ui-title>
    <div class="container">
      <div class="product__wrapper">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useProductBySlug} from "~/composables/products";
import {usePageTitle} from "~/composables/utils";

const route = useRoute()

const { setPageTitle } = usePageTitle()

const slug = route.params.slug as string

const { product } = await useProductBySlug(slug)
setPageTitle(product.value?.name ?? 'Product')

watch(
  () => route.params.slug,
  async (newSlug) => {
    if (typeof newSlug === 'string') {
      const { product } = await useProductBySlug(newSlug)
      setPageTitle(product.value?.name ?? 'Product')
    }
  }
)
</script>

<style scoped lang="scss">

</style>