<script setup lang="ts">
import { AnimatePresence, motion } from "motion-v"
import { Icon } from "@iconify/vue"
import { Tooltip } from "reka-ui/namespaced"
import { ref } from "vue"

const open = ref(false)

const spring = {
  visualDuration: 0.3,
  type: "spring",
  bounce: 0.6,
}
</script>

<template>
    <div class="container">
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger class="tooltip-trigger">
              Hover or focus <Icon icon="radix-icons:plus" />
          </Tooltip.Trigger>
          <Tooltip.Portal>
            <AnimatePresence>
              <Tooltip.Content as-child :side-offset="10">
                <motion.div
                  class="tooltip-content"
                  :initial="{ opacity: 0, y: 20, scale: 0.8 }"
                  :animate="{ opacity: 1, y: 0, scale: 1 }"
                  :exit="{
                    opacity: 0,
                    y: 20,
                    scale: 0.8,
                    transition: { duration: 0.1 },
                  }"
                  :transition="{
                    ...spring,
                    opacity: { ...spring, bounce: 0 },
                  }"
                >
                  Add to library
                  <Tooltip.Arrow class="tooltip-arrow" />
                </motion.div>
              </Tooltip.Content>
            </AnimatePresence>
          </Tooltip.Portal>
        </Tooltip.Root>
      </Tooltip.Provider>
    </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip-content {
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 18px;
  line-height: 1;
  color: #f5f5f5;
  background-color: #0cdcf7;
  user-select: none;
  will-change: transform, opacity;
  color: #0f1115;
}

.tooltip-arrow {
  fill: #0cdcf7;
}

.tooltip-trigger {
  font-family: inherit;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f1115;
  background-color: var(--layer);
  border: 1px solid var(--border);
  color: #f5f5f5;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
}
</style>