<template>
  <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="absolute z-10 -ml-4 mt-3 w-screen max-w-xs transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2"
      >
        <div
          class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
        >
          <slot></slot>
        </div>
      </div>
    </template>
  </Dropdown>
</template>

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

const props = defineProps<{
  title: string;
}>();
</script>
