<template>
  <div class="cart">
    <div class="cart__items">
      <div
        v-for="cartItem in cart?.line_items"
        :key="cartItem.variation_id"
      >
        <CartItem :cart-item="cartItem" />
      </div>
    </div>

    <div class="cart__create-order">
      <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>

      <UButton class="w-100 d-flex" @click="createOrder">
        Перейти к оформлению
      </UButton>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { usePostOrdersCreate } from '~/api/mutations/wp'

const { cart } = useCart()
// const { mutateAsync } = usePostOrdersCreate()

const createOrder = async () => {
  // await mutateAsync({ line_items: cart.value.line_items })

  const { data } = await useFetch('/api/bspb')
  console.log(data)
}
</script>

<style lang="scss">
@use '~/assets/scss/utils' as *;

.cart {
  margin-top: 120px;
  margin-inline: auto;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @include mobile {
    margin-top: 20px;
    flex-direction: column;
  }

  &__items {
    display: flex;
    flex-direction: column;
  }

  &__create-order {
    box-shadow: 1px 1px 8px 0 black;
    border-radius: 10px;
    padding: 10px;
    max-width: 360px;

    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    max-height: 100px;
  }
}
</style>
