<template>
  <NuxtLink>
    <li class="bg-block rounded-2xl min-h-[420px] w-[330px] list-none overflow-hidden p-5">
      <article class="group h-full">
        <div class="h-full flex flex-col">
          <div class="h-[205px]">
            <img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`"
              :alt="props.product?.description" class="h-full object-contain w-auto block mx-auto">
          </div>

          <div class="flex flex-col items-start text-start mt-[50px] justify-between h-full">
            <div class="space-y-[15px]">
              <h4 class="font-bold">{{ props.product?.name }}</h4>
              <p class="text-sm font-normal">{{ props.product?.tax_name }}</p>
            </div>
            <div class="flex items-center justify-between w-full">
              <p class="font-bold text-accent-green-light text-sm sm:text-2xl">{{ props.product?.formatted_price }}</p>
              <div class="w-12 h-12 bg-button flex items-center justify-center rounded-[10px]">
                <i class="uil uil-shopping-cart text-[31px] cursor-pointer text-white"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-if="!props.product?.is_sale_active"
          class="absolute top-0 flex items-center justify-center w-full h-full px-4 bg-black bg-opacity-90 cursor-progress">
          <div class="flex flex-col items-center gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
              <path fill="#ffcc00" d="M5.7 22H42.5V26H5.7z" transform="rotate(-45.001 24.036 24.037)"></path>
              <path fill="#ffcc00"
                d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,40c-8.8,0-16-7.2-16-16S15.2,8,24,8 s16,7.2,16,16S32.8,40,24,40z">
              </path>
            </svg>
            <span class="font-bold text-center uppercase text-yellow">
              {{ $t("FrontTranslations", "not available") }}
            </span>
          </div>
        </div> -->
      </article>
    </li>
  </NuxtLink>
</template>

<script setup lang="ts">
// import imgUrl from "~/utils/imgUrl";
const props = defineProps({
  product: Object,
});

// const addToCartAndPreventNavigation = (event: any) => {
//   event.preventDefault();
//   useCartStore().addToCart(props.product);
// };
</script>
