<script setup lang="ts">
const props = defineProps<{
  records: Array<any>,
  recordKey: string,
  recordValue?: string,
  variant?: "default" | "inset" | "accordion" | "popout",
  modelValue?: any,
}>();

// eslint-disable-next-line func-call-spacing
defineEmits<{
  (e: "update:modelValue", value: typeof props.modelValue): void,
}>();
</script>

<template>
  <VExpansionPanels
    multiple
    :v-model="modelValue"
    @update:model-value="(e: any) => $emit('update:modelValue', e)"
  >
    <VExpansionPanel
      v-for="record in records"
      :key="record[recordKey]"
      :variant="props.variant ?? 'default'"
      :value="recordValue !== undefined ? record[recordValue] : undefined"
    >
      <template #title>
        <slot name="title" :record="record" />
      </template>
      <template #text>
        <slot name="text" :record="record" />
      </template>
    </VExpansionPanel>
  </VExpansionPanels>
</template>