<template>
  <div class="relative">
    <Dropdown :title="title">
      <template #trigger="{ title, open, toggle }">
        <button
          type="button"
          @click="() => toggle()"
          :aria-expanded="open"
          :class="[
            open ? 'text-gray-900' : 'text-gray-500',
            'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
          ]"
        >
          <span>{{ title }}</span>
          <ChevronDownIcon class="ml-2 h-5 w-5" />
        </button>
      </template>

      <template #default="{ title, open, toggle }">
        <div
          :class="[
            positionClass,
            'absolute z-10 -ml-4 mt-1 w-screen max-w-xs transform px-2 sm:px-0 lg:ml-0',
          ]"
        >
          <div
            class="overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
          >
            <slot></slot>
          </div>
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script setup lang="ts">
import { ChevronDownIcon } from '@heroicons/vue/24/outline';
import { computed } from '@vue/reactivity';
import { onMounted, ref } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import Dropdown from './Dropdown.vue';

const props = defineProps<{
  title: string;
  position?: 'left' | 'center' | 'right';
}>();

const positionClass = computed(() => {
  if (!props.position || props.position === 'center')
    return 'left-1/2 -translate-x-1/2';
  if (props.position === 'left') return 'left-0';
  if (props.position === 'right') return 'right-0';
  return '';
});
</script>
