<script lang="ts" setup>

// import

import type { ProductVariantProvideType } from "~/pages/product/[id].vue";

// provide / inject

const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;

</script>

<template>
    <section class="w-full container py-20 flex flex-col gap-y-[1.5rem]">
        <div class="w-full flex">
            <span class="text-black max-lg:hidden typo-h-4 mb-4"> جزيات محصول </span>
        </div>
        <div class="w-full flex items-start justify-between gap-[3rem] max-lg:flex-col-reverse">
            <div class="flex-1 w-full">
                <Accordion />
            </div>
            <div class="w-full lg:w-[450px] xl:w-[600px]">
                <div
                    class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]"
                >
                    <span class="typo-h-6 mb-8">داخل جعبه چیه؟</span>
                    <div
                        class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]"
                    >
                        <div
                            v-for="inPackItem in selectedVariant!.in_pack_items"
                            class="w-full flex-col-center gap-[.75rem]"
                        >
                            <div
                                class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
                            >
                                <div class="size-11 relative">
                                    <img
                                        class="size-full absolute object-cover"
                                        :src="inPackItem.cover"
                                        :alt="inPackItem.item_title"
                                    />
                                </div>
                            </div>
                            <span class="text-black typo-p-md">
                                {{ inPackItem.item_title}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>