<template>
  <div class="tp-product-details-thumb-wrapper tp-tab d-sm-flex">
    <nav>
      <div class="nav nav-tabs flex-sm-column" id="productDetailsNavThumb" role="tablist">
        <button v-for="(item, i) in product.photos" :key="i"
          @click="productsStore.handleImageActive(item.small_size_url)"
          :class="`nav-link ${item.small_size_url === productsStore.active_img ? 'active' : ''}`">
          <img :src="item.small_size_url" alt="nav-img" />
        </button>
      </div>
    </nav>
    <div class="tab-content m-img" id="productDetailsNavContent">
      <div>
        <div class="tp-product-details-nav-main-thumb" style="background-color: #f5f6f8">
          <img :src="productsStore.active_img" alt="prd-image" />
          <!-- <div v-if="product.videoId" class="tp-product-details-thumb-video">
            <a
              @click="utilsStore.playVideo(product.videoId)"
              class="tp-product-details-thumb-video-btn cursor-pointer popup-video"
            >
              <i class="fas fa-play"></i>
            </a>
          </div> -->
        </div>
      </div>
    </div>
  </div>

  <!-- modal video component -->
  <!-- <modal-video v-if="product.videoId" /> -->
  <!-- modal video component -->
</template>

<script setup lang="ts">
import type { ProductInterface } from "@/pinia/products/interfaces/products.interface";
import { useProductsStore } from "@/pinia/products/products.store";
// props
defineProps<{ product: ProductInterface }>();

const productsStore = useProductsStore();
</script>
