<template>
    <HoverCardRoot :open-delay="delay" @update:open="(...args) => emits('open', ...args)">
        <HoverCardTrigger class="inline-block cursor-help outline-none">
            <slot></slot>
        </HoverCardTrigger>
        <HoverCardPortal v-if="!disabled">
            <HoverCardContent :class="$attrs.class" :side="side" :align="align" avoidCollisions :collisionPadding="20" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
                <slot name="content"></slot>
                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
            </HoverCardContent>
        </HoverCardPortal>
    </HoverCardRoot>
</template>

<script setup lang="ts">
const { delay = 500, disabled = false, side = 'bottom', align = 'center', triggerKey } = defineProps<{
    delay?: number
    disabled?: boolean
    side?: 'top' | 'right' | 'bottom' | 'left'
    align?: 'start' | 'center' | 'end'
    triggerKey?: string
}>();

const emits = defineEmits(['open']);
const canOpen = ref(true);

if(triggerKey)
{
    const magicKeys = useMagicKeys();
    const keys = magicKeys[triggerKey];

    watch(keys, (v) => {
        canOpen.value = v;
    }, { immediate: true, });
}
</script>