<script setup lang="ts">
import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"
import { tooltipArrowVariants, tooltipContentVariants, type TooltipArrowVariants, type TooltipContentVariants } from "."

defineOptions({
    inheritAttrs: false,
})

interface Props {
    includeArrow?: boolean
    class?: HTMLAttributes["class"]
    arrowClass?: HTMLAttributes["class"]
    tooltipColor?: TooltipContentVariants["color"]
    tooltipArrowColor?: TooltipArrowVariants["color"]
}

const props = withDefaults(defineProps<TooltipContentProps & Props>(), {
    sideOffset: 4,
    includeArrow: true
})

const emits = defineEmits<TooltipContentEmits>()

const delegatedProps = reactiveOmit(props, "class")
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
    <TooltipPortal>
        <TooltipContent data-slot="tooltip-content" v-bind="{ ...forwarded, ...$attrs }"
            :class="cn(tooltipContentVariants({ variant: 'default', color: tooltipColor }), props.class)">
            <slot />

            <TooltipArrow
                :class="cn(tooltipArrowVariants({ variant: 'default', color: tooltipArrowColor }), arrowClass)"
                v-if="includeArrow" />
        </TooltipContent>
    </TooltipPortal>
</template>
