<script setup>
import { ref } from "vue";

const headerId = `head-${Math.random().toString(20).substr(2, 10)}`;
const bodyId = `body-${Math.random().toString(20).substr(2, 10)}`;

const props = defineProps({
  expanded: {
    type: Boolean,
    default: false,
  },
});

const expanded = ref(props.expanded);

const toggle = () => {
  expanded.value = !expanded.value;
};
</script>

<template>
  <button
    :id="headerId"
    type="button"
    class="flex items-center justify-between w-full p-5 rounded-lg font-medium rtl:text-right text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
    :data-accordion-target="`#${bodyId}`"
    :aria-expanded="expanded"
    :aria-controls="bodyId"
    @click="toggle"
  >
    <slot name="title"></slot>
    <svg
      data-accordion-icon
      :class="{ 'rotate-180': !expanded, 'rotate-0': expanded }"
      class="w-3 h-3 shrink-0"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 10 6"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M9 5 5 1 1 5"
      />
    </svg>
  </button>

  <div
    :id="bodyId"
    :class="`${expanded ? '' : 'hidden'} p-5`"
    :aria-labelledby="headerId"
  >
    <slot />
  </div>
</template>
