<script>

export default {
  name: 'VAccordion',
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
  },
  setup(props, {slots}) {
    const hasHeader = slots.header !== undefined
    const hasBody = slots.body !== undefined
    return {
      hasHeader,
      hasBody
    }
  },
  computed: {
  },
  methods: {
  }
}

</script>

<template>
  <div class="relative w-full">
    <input
      :id="id"
      type="checkbox"
      value=""
      :checked="isOpen"
      class="hidden peer"
      required=""
    >
    <label
      :for="id"
      class="inline-flex items-center justify-between w-full px-5 h-[50px] text-gray-600 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:rounded-b-none peer-checked:border-slate-200 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 transition-all"
    >
      <div v-if="hasHeader"><slot name="header" /></div>
    </label>
    <i class="ri-arrow-down-s-line absolute right-[10px] top-[15px] peer-checked:rotate-180 transition-all pointer-events-none" />
    <div
      v-if="hasBody"
      class="hidden peer-checked:block transition-all w-full px-5 py-4 text-gray-600 bg-white border border-gray-200 rounded-b-lg cursor-default"
    >
      <slot name="body" />
    </div>
  </div>
</template>

<style scoped>
</style>
