<template>
  <p class="text-sm font-light leading-relaxed mt-4 mb-4" v-for="item in items" :key="item.id">
    <div tabindex="0" class="collapse collapse-arrow rounded-box">
      <input type="checkbox" class="peer" /> 
      <div class="collapse-title peer-checked:bg-light-medium-grey">
        <span class="text-xl mb-2 font-semibold leading-normal">{{ item.id }}.</span> <span class="text-base mb-2 font-medium leading-normal">{{ item.title }}</span>
      </div>
      <div class="collapse-content pt-1 bg-primary peer-checked:bg-main-purple peer-checked:text-secondary-content"> 
        <p class="indent-2">{{ item.answer }}</p>
      </div>
    </div>
  </p>
</template>

<script>

export default {
  name: "Collapse",
  props: {
    items: {
      type: Object,
      id: {
        type: String,
        default: '/',
      },
      title: {
        type: String,
      },
      answer: {
        type: String,
      },
    },
  },
  computed: {
  },
};
</script>
