<template>
  <div class="cart-item">
    <NuxtLink :to="`/product/${productsData?.parent_id}`">
      <img
        class="cart-item__image"
        :src="productsData?.images[0]?.src"
        alt="cart?.image"
      >
    </NuxtLink>

    <div>
      {{ productsData?.name }}

      <div class="d-flex align-items-center">
        {{ productsData?.price }}
        <Icon name="ph:currency-rub" />
      </div>

      <div class="cart-item__attributes">
        <div>{{ t(`colors.${color}`) }} {{ t(`materials.${material}`) }}</div>
        <div>{{ `размер ${size}` }}</div>
      </div>

      <div>
        <UButton
          icon="i-lucide-trash"
          @click="deleteItem(cartItem)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  cartItem: {
    type: String,
    required: true,
  },
})

const { t } = useI18n()
const { cartRemoveItem } = useCart()
const { productsData, color, material, size } = useProduct(props?.cartItem?.variation_id)

const deleteItem = (item) => {
  cartRemoveItem({ variation_id: item?.variation_id })
}
</script>

<style lang="scss">
.cart-item {
  max-width: 600px;
  display: flex;
  flex-direction: row;
  gap: 20px;

  &__image {
    width: 120px;
    cursor: pointer;
  }

  &__attributes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
