<template>
        <HoverCard nuxt-client class="min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]">
			<template #content>
				<Markdown class="!px-6" path="tags" :filter="tag" popover />
			</template>
            <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
				<slot></slot>
			</span>
		</HoverCard>
</template>

<style>
.cm-hashtag.cm-hashtag-begin
{
    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 ps-1 rounded-l-[12px]  border border-r-0 border-accent-blue border-opacity-30;
}
.cm-hashtag.cm-hashtag-end
{
    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 pe-1 rounded-r-[12px] !rounded-se-none border border-l-0 border-accent-blue border-opacity-30;
}
</style>

<script setup lang="ts">
const { tag } = defineProps<{
    tag: string
}>();

const { content } = useContent();
const overview = computed(() => content.value.find(e => e.path === "tags"));
</script>