<template>
  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
    <product-page-course-detailsHeader :props="data.course"/>
    <div
      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
    >
      <div
        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
      >
        <product-page-course-detailsDescription :props="data.course" />
        <product-page-course-detailsHeadlines :props="data.course"/>
        <product-page-course-detailsComments :props="data.course"/>
      </div>
      <div class="w-full md:w-[23.438vw] text-[#383E43]">
        <product-page-course-detailsCourse-status :props="data.course"/>
        <product-page-course-detailsCourse-information :props="data.course"/>
      </div>
    </div>
  </div>
</template>

<script setup>
const route = useRoute();
const  {data}  = await useFetch("/api/productId", {
    method: "POST",
      body: {
        id: route.params.product,
      },
  })
console.log(data.value.course);

</script>