<template>
  <router-link tag="div" :to="{name: 'instrument', params: {slug: slug}}" class="instrument-teaser">
    <h3 class="instrument-teaser__title">{{title}}</h3>
    <p class="instrument-teaser__text" v-html="teaser">
    </p>
  </router-link>
</template>

<script>
  import teaser from '@/helpers/teaser';

  export default {
    props: ['title', 'contents', 'slug'],

    computed: {
      teaser() {
        return teaser(this.contents);
      }
    }
  }
</script>

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

  .instrument-teaser {
    height: 250px;
    box-sizing: border-box;
    padding: $medium-spacing;
    @include widget-shadow;
    width: 100%;
    cursor: pointer;

    &__title {
      @include heading-3;
      margin-bottom: $small-spacing;
      line-height: 1.2;
    }
  }
</style>
