<template>
    <box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
        <div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2 cursor-pointer">
            <div v-text="title"></div>
            <div class="flex items-center space-x-2">
                <slot name="buttons"></slot>
                <chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
            </div>
        </div>
        <div v-if="modelValue === index" class="p-2 pt-0">
            <slot />
        </div>
    </box>
</template>

<script setup>
import Box from './Box.vue';
import Chevron from './icons/Chevron.vue';

const emit = defineEmits(['update:model-value']);

const props = defineProps({
    type: {
        required: true,
        type: String,
    },
    title: {
        required: true,
        type: String,
    },
    modelValue: {
        required: true,
        type: Number,
    },
    index: {
        required: true,
        type: Number,
    },
});
</script>
