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

// queries

const { data: cart } = useGetCartOrders();

// 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 container flex flex-col gap-[5rem] max-w-[80vw]"
        >
            <div class="w-full flex flex-col">
                <div
                    class="flex flex-col items-center justify-center gap-4 py-[5rem] 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]"
                        >
                            <Icon
                                name="bi:arrow-right"
                                class="**:stroke-cyan-400"
                            />
                            <span class="text-cyan-400">
                                {{ prevPage?.label }}
                            </span>
                        </NuxtLink>
                    </div>

                    <h1
                        class="w-full text-center typo-h-3 lg:w-6/12 title-large"
                    >
                        {{ 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" />
                </div>
            </div>
            <ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
        </main>
        <div class="w-full flex-col flex mt-20">
            <ServiceHighlights />
            <Footer />
        </div>
    </div>
</template>

<style scoped></style>
