Sync data with api response

frontend/components/product/ProductHero.vue

@@ -1,7 +1,17 @@
 <script lang="ts" setup>
+
+// import
+
+import useGetProduct from "~/composables/api/product/useGetProduct";
+
 // state
+
+const route = useRoute();
+const id = route.params.id as string | undefined;
+
+const { data: product } = useGetProduct(id);
+
 const quantity = ref(1);
-const maxQuantity = ref(10);
 
 const selectedSlide = ref(0);
 const slides = [
@@ -29,21 +39,17 @@ const slides = [
         />
         <div class="flex-1 flex flex-col gap-3 mt-12">
             <span class="typo-label-sm"> سامسونگ </span>
-            <h1 class="typo-h-2">موبایل Nova</h1>
+            <h1 class="typo-h-2"> {{ product!.name }} </h1>
             <div class="flex w-full items-center justify-between">
-                <span class="typo-p-2xl"> $689.00 </span>
+                <span class="typo-p-2xl"> {{ product!.price }} </span>
                 <Rating />
             </div>
             <p class="typo-p-md text-slate-500 text-justify">
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
-                در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
-                نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                کتابهای زیادی در شصت و سه درصد گذشته.
+                {{product!.description}}
             </p>
             <div class="w-full flex flex-col gap-6 mt-4">
                 <RemainQuantity
-                    :maxQuantity="maxQuantity"
+                    :maxQuantity="product!.in_stock"
                     :quantity="quantity"
                 />
                 <div class="w-full flex gap-3 flex-col">
@@ -53,7 +59,7 @@ const slides = [
                         </Button>
                         <QuantityCounter
                             v-model="quantity"
-                            :max="maxQuantity"
+                            :max="product!.in_stock"
                         />
                     </div>
                     <Button class="w-full rounded-full" variant="outlined">