<script setup>
import { defineProps } from "vue";
import { twMerge } from "tailwind-merge";

/*
title: title
data: [{
    title: subtitle,
    key,
}]
*/

const props = defineProps({
  open: Boolean,
  title: String,
  data: Array,
  toggle: Function,
  borderIsActive: {
    type: Boolean,
    default: true,
  },
  borderClass: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <div
    tabindex="0"
    :class="
      twMerge(
        'collapse collapse-arrow  bg-transparent rounded-none accordion',
        open ? 'collapse-open ' : 'collapse-close'
      )
    "
  >
    <div
      :class="
        twMerge(
          'collapse-title text-2xl font-bold w-full flex justify-between items-center text-white px-2 border-b  cursor-pointer',
          borderIsActive ? 'border-info' : borderClass
        )
      "
      @click="toggle"
    >
      <slot name="collapseTitle" v-bind="{ data: d }">
        {{ title }}
      </slot>
    </div>
    <div
      v-show="open"
      :class="
        twMerge(
          'collapse-content border-b bg-normal m-0 p-4',
          borderIsActive ? 'border-info' : borderClass
        )
      "
    >
      <ul>
        <li v-for="d in data" class="cursor-pointer text-base text-white py-2">
          <slot name="collapseContent" v-bind="{ data: d }">
            {{ d.title }}
          </slot>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="css" scoped></style>
