<script setup lang="ts">
// imports

import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";

// state

const showMore = ref(false);

// queries

const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
</script>

<template>
    <div class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-slate-200 rounded-xl bg-gray-50">
        <span class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900">
            خلاصه سفارش
        </span>

        <div
            class="grid w-full grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 md:grid-cols-2 lg:h-max transition-all"
            :class="showMore ? 'h-[calc(100px)]' : 'h-max'"
        >
            <template v-if="cartIsLoading">
                <Skeleton
                    v-for="i in 6"
                    class="w-full !h-14 !rounded-100"
                ></Skeleton>
            </template>

            <template v-else>
                <div class="w-full overflow-hidden gap-4 flex flex-col">
                    <MinimalCartItem
                        v-for="(cartItem, index) in cart?.items"
                        :key="index"
                        :image="cartItem.product.image"
                        :title="cartItem.product.title"
                    />
                </div>

                <div
                    v-if="cart && cart.items.length > 5"
                    class="h-7 flex-center col-span-full lg:hidden"
                >
                    <button
                        @click="showMore = !showMore"
                        class="gap-2 flex-center"
                    >
                        <span class="text-sm text-black"> مشاهده بیشتر </span>
                        <Icon
                            name="ci:bi-chevron-down"
                            class="**:stroke-black"
                        />
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<style scoped></style>
