<script lang="ts" setup>
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";

// provide / inject

const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
</script>

<template>
    <div class="w-full flex flex-col">
        <AccordionRoot
            class="w-full last:border-b last:border-slate-200"
            :default-value="'item' + selectedVariant!.details[0].detail_category"
            type="single"
            :collapsible="true"
        >
            <AccordionItem
                v-for="detailItem in selectedVariant!.details"
                :value="'item' + detailItem.detail_category"
                class="overflow-hidden"
            >
                <AccordionHeader class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center">
                    <span class="typo-sub-h-md text-black">{{ detailItem.detail_category }}</span>
                    <AccordionTrigger class="group">
                        <Icon
                            name="ci:plus"
                            size="24"
                            class="group-data-[state=open]:rotate-45 transition-transform"
                        />
                    </AccordionTrigger>
                </AccordionHeader>
                <AccordionContent
                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
                >
                    <div class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]">
                        <div
                            v-for="item in detailItem.details"
                            class="flex flex-col gap-y-[1.5rem]"
                        >
                            <span class="typo-sub-h-lg text-black w-full pt-[1.5rem]">
                                {{ item.title }}
                            </span>
                            <ul class="list-disc w-full ps-5">
                                <li
                                    v-for="detail in item.texts"
                                    class="text-slate-500 text-sm leading-[175%] mt-1.5"
                                >
                                    {{ detail }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </AccordionContent>
            </AccordionItem>
        </AccordionRoot>
    </div>
</template>
