<template>
    <div class="header-cart-list-item">
      <div class="flex">
        <img :src="product.coverPath" />
        <div class="w-full">
          <h3>{{ product.category[product.category.length - 1]?.name }}</h3>
          <h2>{{ product.title }}</h2>
  
          <span class="text-zinc-800 text-[0.9em] mt-auto">
            <b>{{ numberFormat(product.specialPrice * productQuantity || product.price * productQuantity) }} </b>
            {{ $t("priceUnit") }}
          </span>
          <div class="flex flex-row justify-start w-48">
            <CartQuantity
              v-if="cart.items[index]"
              v-model="productQuantity"
              :range="product.orderRange"
            />
          </div>
        </div>
      </div>
  
      <!-- <Button
          icon="isax isax-trash"
          severity="secondary"
          text
          @click="$emit('remove', product)"
        /> -->
    </div>
  </template>
  
  <script setup>
  const props = defineProps(["id", "index"]);
  const cart = useCartStore();
  console.log(props.id);
  console.log(props.index);
  const product = cart.items[props.index].product;
  console.log(product);
  const productQuantity = computed({
    get: () => cart.items[props.index].quantity || 0,
    set: (v) => cart.update(product, v),
  });
  const numberFormat = (number) =>
    new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
      number
    );
  </script>
  
  <style lang="scss">
  .header-cart-list-item {
    box-shadow: 0px 2px 12px #004b8226;
    @apply flex p-2 pl-6 w-[26.9rem] bg-white rounded-lg shadow border relative;
  
    & > div {
      & > span {
        @apply absolute left-5 top-4 text-xs font-poppins;
      }
  
      img {
        @apply w-[9.2rem] h-[9.2rem] p-2;
      }
  
      div:nth-of-type(1) {
        @apply w-max gap-1 flex flex-col py-4 font-vazir mr-6;
  
        h3 {
          @apply text-right text-neutral-400 text-[0.9em] font-medium;
        }
  
        h2 {
          @apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
        }
        & > div {
          @apply flex flex-row mr-0 h-14 items-center #{!important};
        }
      }
    }
  }
  </style>
  