<template>
  <div va-show="utilityStore.modalId && utilityStore.product" class="modal fade tp-product-modal" :id="utilityStore.modalId as string" tabindex="-1" :aria-labelledby="utilityStore.modalId as string" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" data-bs-backdrop="static" data-bs-keyboard="false">
      <div class="modal-content">
        <div class="tp-product-modal-content d-lg-flex align-items-start">
          <button type="button" class="tp-product-modal-close-btn" data-bs-dismiss="modal" :data-bs-target="`#${utilityStore.modalId}`">
            <i class="fa-regular fa-xmark"></i>
          </button>

          <product-details-thumb :product="utilityStore.product as IProduct" />

          <product-details-wrapper v-if="utilityStore?.product?.id" :main-product="utilityStore.product" :product="utilityStore.product" :product-meta="utilityStore.meta" :is-show-bottom="false"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUtilityStore } from "@/pinia/useUtilityStore";
import type {IProduct} from "@/types/product-d-t";
const utilityStore = useUtilityStore();

</script>