<script setup lang="ts">
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
</script>

<template>
  <Popover>
    <PopoverButton data-cy="notification-bell-button">
      <slot name="toggleButtonContent"></slot>
    </PopoverButton>

    <PopoverPanel>
      <div
        class="absolute right-0 mt-2 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-2"
      >
        <!-- To close the popover withing your content, use the 'PopoverButton'
             https://headlessui.com/vue/popover#closing-popovers-manually
         -->
        <slot name="popoverContent" />
      </div>
    </PopoverPanel>
  </Popover>
</template>
