<script setup lang="ts">
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";

// state

const route = useRoute();

// computed

const pageTitle = computed(() => route.meta.pageTitle);
const prevPage = computed(() => route.meta.prevPage as { name: string; label: string } | undefined);

// queries

const { data: cart, isLoading: cartIsLoading, suspense } = useGetCartOrders();

await suspense();

// computed

const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
</script>

<template>
    <div
        class="w-full flex flex-col-center persian-number font-iran-yekan-x"
        dir="rtl"
    >
        <Header />

        <main class="w-full overflow-x-hidden flex flex-col gap-[5rem] lg:max-w-[85vw]">
            <div class="w-full flex flex-col container">
                <div
                    class="flex flex-col items-center justify-center py-[3.5rem] lg:py-[5rem] gap-5 lg:gap-0 lg:flex-row"
                >
                    <div class="flex items-center justify-start w-full lg:w-3/12">
                        <NuxtLink
                            v-if="prevPage"
                            :to="{ name: prevPage?.name }"
                            class="flex items-center gap-2 text-sm lg:text-[1rem] font-medium"
                        >
                            <Icon
                                name="ci:bi-arrow-right"
                                class="**:stroke-blue-500"
                            />
                            <span class="text-blue-500">
                                {{ prevPage?.label }}
                            </span>
                        </NuxtLink>
                    </div>

                    <h1 class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4">
                        {{ pageTitle }}
                    </h1>

                    <div class="hidden w-3/12 shrink-0 lg:block">&nbsp;</div>
                </div>
                <div
                    class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
                >
                    <div
                        class="flex flex-col w-full gap-4 lg:gap-6 shrink-0"
                        :class="hasCartItem ? 'lg:w-9/12' : ''"
                    >
                        <NuxtPage />
                    </div>
                    <CartSummary v-if="hasCartItem && !cartIsLoading" />
                </div>
            </div>
            <ProductsSlider
                title="دیگر محصولات"
                icon-image="/img/simulare-products-section.gif"
            />
        </main>
        <div class="w-full flex-col flex mt-20">
            <ServiceHighlights />
            <Footer />
        </div>
    </div>
</template>

<style scoped></style>
