<template>
  <router-link
    :to="moduleLink"
    :class="['module-teaser', {'module-teaser--small': !teaser}]"
    tag="div"
  >
    <div
      :style="{backgroundImage: 'url('+heroImage+')'}"
      class="module-teaser__image"/>
    <div class="module-teaser__body">
      <h3 class="module-teaser__meta-title">{{ metaTitle }}</h3>
      <h3 class="module-teaser__title">{{ title }}</h3>
      <p class="module-teaser__description">{{ teaser }}</p>
    </div>
  </router-link>
</template>

<script>
  export default {
    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],

    computed: {
      moduleLink() {
        return {
          name: 'module',
          params: {
            slug: this.slug
          }
        };
      }
    }
  };
</script>

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

  .module-teaser {
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #E2E2E2;
    height: 330px;
    max-width: 380px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;

    &--small {
      height: 300px;
    }

    &__image {
      width: 100%;
      max-height: 150px;
      height: 150px;
      background-position: center;
      background-size: 100% auto;
      background-repeat: no-repeat;
    }

    &__body {
      padding: 20px;
    }

    &__meta-title {
      color: $color-silver-dark;
      margin-bottom: $large-spacing;
      @include regular-text;
    }

    &__title {
      @include heading-3;
      margin-bottom: 5px;
    }

    &__description {
      line-height: $default-line-height;
      font-size: 1.2rem;
    }
  }
</style>
