<template>
  <tr>
    <!-- title -->
    <td class="d-flex align-items-center ">
      <div class="tp-cart-img w-auto me-0 px-4">
        <nuxt-link :href="`/product-details/${item.id}`" style="background-color: #F2F3F5;display: block;">
          <img :src="item.photos[0].small_size_url" alt="" />
        </nuxt-link>
      </div>
      <div class="tp-cart-title">
        <nuxt-link :href="`/product-details/${item.id}`" class="ms-0">{{ item.name }}</nuxt-link>
      </div>
    </td>
    <!-- price -->
    <td class="tp-cart-price"><span>${{ item.price }}</span></td>
    <!-- quantity -->
    <td class="tp-cart-quantity">
      <div class="tp-product-quantity mt-10 mb-10">
        <span>{{ item.quantity }}</span>
      </div>
    </td>
    <!-- action -->
    <td class="tp-cart-action">
      <button class="tp-cart-action-btn" @click="removeProductCart(item.item_id)">
        <svg-remove />
        <span>  Eliminar</span>
      </button>
    </td>
  </tr>
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';
import type { ProductInterface } from '@/pinia/products/interfaces/products.interface';
import { toast } from 'vue3-toastify';
const cartStore = useCartStore();

const props = defineProps<{ item: ProductInterface }>();

onMounted(() => {
  console.log(props);
})

const removeProductCart = async (item_id: number) => {
  const removed = await cartStore.removeCartItem(item_id);

  await cartStore.getCart();
  if(removed) {
    toast.success('El producto ha sido eliminado correctamente', { position: 'bottom-center' });
  } else {
    toast.error('Hubo un error al eliminar el producto', { position: 'bottom-center' });
  }

}

</script>
