<script setup lang="ts">
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/core/popover';
import UiSidebarPopoverTrigger from './UiSidebarPopoverTrigger.vue';
import type { UiSidebarPopoverProps } from './types';

defineOptions({
  name: 'UiSidebarPopover',
});

const props = withDefaults(defineProps<UiSidebarPopoverProps>(), {
  tooltip: '',
  side: 'bottom',
  align: 'start',
  sideOffset: 8,
});
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <UiSidebarPopoverTrigger :label="props.label" :tooltip="props.tooltip">
        <template v-if="$slots.icon || $slots['trigger-icon']" #icon>
          <slot name="icon">
            <slot name="trigger-icon" />
          </slot>
        </template>

        <template v-if="$slots['end-icon']" #end-icon>
          <slot name="end-icon" />
        </template>
      </UiSidebarPopoverTrigger>
    </PopoverTrigger>

    <PopoverContent
      :side="props.side"
      :align="props.align"
      :side-offset="props.sideOffset"
      class="w-[22rem] rounded-md p-0 shadow-md bg-background-surface-secondary"
    >
      <slot />
    </PopoverContent>
  </Popover>
</template>
