<!--
Panneaux déroulants de type "accordéon"

@see https://vuetifyjs.com/en/components/expansion-panels/
-->

<template>
  <v-expansion-panel :id="id">
    <v-expansion-panel-header color="ot_light_grey">
      <v-icon class="ot_white--text ot_green icon">
        {{ icon }}
      </v-icon>
      {{ $t(id) }}
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <slot />
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

<script setup lang="ts">
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: false,
    default: null
  }
})
</script>

<style scoped>
  .icon{
    width: 47px;
    height: 47px;
    padding: 10px;
    margin-right: 10px;
    flex: none !important;
  }
  .v-expansion-panel-header{
    padding: 0;
    padding-right: 20px;
  }
  .v-expansion-panel--active > .v-expansion-panel-header{
    min-height: 47px;
  }
</style>
