<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>

  <div>
    <UButton @click="createOrder">
      Оформить заказ
    </UButton>
  </div>
</template>

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

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

const createOrder = () => {
  mutateAsync(cart)
}
</script>

<style lang="scss">
.cart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  &__items {
    display: flex;
    flex-direction: column;
  }
}
</style>
