<template>
     <v-expansion-panel :id="id" >
       <v-expansion-panel-header class="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></slot>
       </v-expansion-panel-content>
     </v-expansion-panel>
 </template>

<script lang="ts">
    export default {
      props: {
        id:{
          type: String,
          required: true
        },
        icon:{
          type: String,
          required: false
        }
      }
    }
</script>

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