<script setup lang="ts">
import { useMediaQuery } from "@vueuse/core";
import type { HTMLAttributes } from "vue";

import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from "@/components/ui/popover";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from "@/components/ui/tooltip";

const props = defineProps<{
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
  open?: boolean;
  class?: HTMLAttributes["class"];
}>();

const isMobile = useMediaQuery("(max-width: 640px)");
</script>

<template>
  <div>
    <!-- 移动端 Popover -->
    <Popover v-if="isMobile">
      <PopoverTrigger as-child>
        <slot name="trigger" />
      </PopoverTrigger>
      <PopoverContent
        :side="side"
        :align="align"
        class="w-fit px-0 py-2 relative top-2! rounded-lg! border-none!"
        :class="props.class"
      >
        <slot />
      </PopoverContent>
    </Popover>

    <!-- PC Tooltip -->
    <TooltipProvider v-else :delay-duration="150">
      <Tooltip>
        <TooltipTrigger as-child>
          <slot name="trigger" />
        </TooltipTrigger>
        <TooltipContent
          :side="side"
          :align="align"
          class="w-fit px-0 py-2 relative top-2! bg-popover text-popover-foreground border rounded-lg! [&>svg]:hidden [&>span>svg]:opacity-0!"
          :class="props.class"
        >
          <slot />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</template>
