<script setup lang="ts">
import { toRefs, ref } from 'vue';

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})
const { params } = toRefs(props)
const arg = params.value;
const descTip = ref<string>(arg['desc_tip'] ? arg['desc_tip'] : '');
const isOpen = ref(false)
</script>

<template>
  <div
    v-if="descTip !== ''"
    class="stw-tooltip"
  >
    <div
      class="stwlite-tw-relative stwlite-tw-inline-block"
      @mouseenter="isOpen = true"
      @mouseleave="isOpen = false"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark-icon lucide-circle-question-mark stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-0"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>

      <transition
        enter="stwlite-tw-transition stwlite-tw-ease-out stwlite-tw-duration-150"
        enter-from="stwlite-tw-opacity-0 stwlite-tw-translate-y-1"
        enter-to="stwlite-tw-opacity-100 stwlite-tw-translate-y-0"
        leave="stwlite-tw-transition stwlite-tw-ease-in stwlite-tw-duration-100"
        leave-from="stwlite-tw-opacity-100 stwlite-tw-translate-y-0"
        leave-to="stwlite-tw-opacity-0 stwlite-tw-translate-y-1"
      >
        <div
          v-if="isOpen"
          class="stwlite-tw-absolute stwlite-tw-left-1/2 stwlite-tw-w-60 stwlite-tw-z-10 stwlite-tw-mt-2 stwlite-tw--translate-x-1/2 stwlite-tw-transform stwlite-tw-rounded-lg stwlite-tw-bg-gray-800 stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-text-white stwlite-tw-shadow-lg"
        >
          {{ descTip }}
          <!-- Arrow -->
          <div
            class="stwlite-tw-absolute stwlite-tw--top-1 stwlite-tw-left-1/2 stwlite-tw-h-2 stwlite-tw-w-2 stwlite-tw--translate-x-1/2 stwlite-tw-rotate-45 stwlite-tw-bg-gray-800"
          ></div>
        </div>
      </transition>
    </div>
  </div>
</template>