<template>
  <div class="section-block">
    <div
      :class="{'section-block--navigatable': route}"
      class="section-block__illustration"
      @click="navigate()">
      <slot/>
    </div>

    <div
      :class="{'section-block--navigatable': route}"
      class="section-block__title block-title"
      @click="navigate()">
      <h2 class="block-title__title">{{ title }}</h2>
      <h3 class="block-title__subtitle small-emph">{{ subtitle }}</h3>
    </div>
    <div class="section-block__content section-content">
      <div class="section-content__subsection subsection">
        <a
          :class="{'section-block--navigatable': route}"
          class="subsection__content button button--primary"
          v-if="route"
          @click="navigate()">
          {{ linkText }}
        </a>
        <span
          class="subsection__content subsection__content--disabled"
          v-if="!route">Noch nicht verfügbar</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'subtitle', 'route', 'link-text'],
    methods: {
      navigate() {
        if (this.route) {
          this.$router.push(this.route);
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .section-block {
    border-radius: $default-border-radius;
    width: 100%;
    overflow: hidden;
    text-align: center;

    &--navigatable {
      cursor: pointer;
    }

    &__title {
      padding: 20px;
    }
  }

  .block-title {
    &__title, &__subtitle {
      color: $color-charcoal-dark;
      font-family: $sans-serif-font-family;
    }

    &__title {
      font-size: toRem(29px);
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 600;
    }

    &__subtitle {
      font-size: toRem(14px);
      font-weight: $font-weight-regular;
      min-height: 2rem;
    }
  }

  .section-content {
    padding: 15px 15px 15px;

    &__subsection {
      padding-bottom: 15px;
    }
  }

  .subsection {
    &__content {
      font-family: $sans-serif-font-family;
      font-weight: 600;

      &--disabled {
        color: $color-silver-dark;
      }
    }
  }

</style>
