<template>
    <div class="w-full flex flex-col">
        <AccordionRoot
            class="w-full last:border-b last:border-slate-200"
            default-value="item-1"
            type="single"
            :collapsible="true"
        >
            <AccordionItem value="item-1" 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">مشخصات</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="i in 4"
                            class="flex flex-col gap-y-[1.5rem]"
                        >
                            <span
                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
                                >صفحه نمایش</span
                            >
                            <ul class="list-disc w-full ps-5">
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                            </ul>
                        </div>
                    </div>
                </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2" 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">مشخصات</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="i in 4"
                            class="flex flex-col gap-y-[1.5rem]"
                        >
                            <span
                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
                                >صفحه نمایش</span
                            >
                            <ul class="list-disc w-full ps-5">
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                            </ul>
                        </div>
                    </div>
                </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3" 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">مشخصات</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="i in 4"
                            class="flex flex-col gap-y-[1.5rem]"
                        >
                            <span
                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
                                >صفحه نمایش</span
                            >
                            <ul class="list-disc w-full ps-5">
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                                <li class="text-slate-500 typo-p-md">
                                    روشنایی :‌3000mn
                                </li>
                            </ul>
                        </div>
                    </div>
                </AccordionContent>
            </AccordionItem>
        </AccordionRoot>
    </div>
</template>

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

<style scoped></style>
