<template>
  <v-card flat class="my-4" color="primary">
    <v-card-title primary-title v-if="disableAccordion"/>
    <v-card-title primary-title v-else @click="expanded = !expanded">
      <v-icon x-small class="mx-4">{{
        expanded ? 'icon-dropdown' : 'icon-dropdown-up'
      }}</v-icon>
      {{ title }} 
    </v-card-title>

    <v-card-text v-if="expanded" class="accordion-body">
      <div class="addresses-info" v-if="title == 'Adressen'">Wil je een adres wijzigen of toevoegen? Mail dan naar <a href="mailto:info@ggzecademy.nl">info@ggzecademy.nl</a></div>

      <v-divider v-if="!disableAccordion" class="mb-10"/>
      <slot></slot>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Title',
    },
    companyMail: {
      type: String, 
      default: 'info@ggzecademy.nl',
    },
    disableAccordion: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      expanded: true,
    }
  },
}
</script>

<style lang="scss">
.addresses-info{
  padding-left: 45px;
  margin-bottom: 16px;
}

</style>
