<template>
  <DisclosureButton
    class="
      flex
      justify-between
      w-full
      font-medium
      text-left
      rounded-lg
      py-4
      btn-one
      hover:bg-purple-200
      focus:outline-none
      focus-visible:ring
      focus-visible:ring-purple-500
      focus-visible:ring-opacity-75
    "
  >
    <h2 class="text-lg font-medium text-blue-300 normal font-Inter">
      {{ $t(title) }}
    </h2>
    <ChevronUpIcon
      :class="open ? '' : 'rotate-180 transform'"
      class="w-6 h-6 mt-1 text-blue-300"
    />
  </DisclosureButton>
</template>

<script>
import { DisclosureButton } from "@headlessui/vue";
import { ChevronUpIcon } from "@heroicons/vue/solid";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: String,
  },
  components: {
    DisclosureButton,
    ChevronUpIcon,
  },
};
</script>

<style>
</style>