<template>
    <TooltipRoot :delay-duration="delay" :disabled="disabled">
        <TooltipTrigger asChild>
            <span tabindex="0"><slot></slot></span>
        </TooltipTrigger>
        <TooltipPortal>
            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
                {{ message }}
                <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
            </TooltipContent>
        </TooltipPortal>
    </TooltipRoot>
</template>

<script setup lang="ts">
const { message, delay = 300, side } = defineProps<{
    message: string
    delay?: number,
    disabled?: boolean
    side?: 'left' | 'right' | 'top' | 'bottom'
}>();
</script>

<style>
.TooltipContent {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.TooltipContent[data-side="top"] {
  animation-name: slideUp;
}
.TooltipContent[data-side="bottom"] {
  animation-name: slideDown;
}
.TooltipContent[data-side="left"] {
  animation-name: slideLeft;
}
.TooltipContent[data-side="right"] {
  animation-name: slideRight;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>