<template>
  <router-link
    :to="moduleLink"
    :class="['module-teaser', { 'module-teaser--small': !teaser }]"
  >
    <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 class="module-teaser__pills">
        <pill :text="level?.name"></pill>
        <pill :text="category?.name"></pill>
      </div>
    </div>
  </router-link>
</template>

<script>
  import Pill from "@/components/ui/Pill.vue";

  export default {

    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage', 'level', 'category'],

    components: {Pill},


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

<style scoped lang="scss">
  @import 'styles/helpers';

  .module-teaser {
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e2e2;
    height: 390px;
    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;
    }

    &__pills {
      margin-top: $medium-spacing;
    }
  }
</style>
