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

type Props = {
    items?: DropdownItem[];
};

// props

defineProps<Props>();

// state

const toggleState = ref(false);
</script>

<template>
    <DropdownMenuRoot v-model:open="toggleState" dir="rtl">
        <DropdownMenuTrigger>
            <slot name="trigger" />
        </DropdownMenuTrigger>

        <DropdownMenuPortal>
            <slot v-if="!!$slots.content" name="content" />
            <DropdownMenuContent
                v-else
                class="min-w-[220px] w-full divide-y divide-gray-300 outline-none bg-gray-50 border border-gray-300 rounded-2xl font-iran-yekan-x p-2 shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-10000"
                :side-offset="5"
            >
                <DropdownMenuItem
                    v-for="(item, index) in items"
                    :key="index"
                    @click="item.onClick"
                    :class="
                        item.itemClass ? item.itemClass : 'hover:!text-black'
                    "
                    class="group text-xs leading-none text-black hover:!bg-gray-200 cursor-pointer rounded-lg flex items-center justify-between py-3 px-1.5 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
                >
                    <span>
                        {{ item.title }}
                    </span>
                    <Icon
                        :name="item.icon"
                        :class="item.iconClass"
                        size="16"
                        class="**:stroke-black"
                    />
                </DropdownMenuItem>

                <DropdownMenuArrow class="fill-white stroke-gray-300" />
            </DropdownMenuContent>
        </DropdownMenuPortal>
    </DropdownMenuRoot>
</template>
