<template>
  <a class="how-to" :href="link" target="_blank">
    <img v-lazy="{ src: image }" />
    <div class="title">
      <slot name="title">How-to Library</slot>
    </div>
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import defaultImg from '@/assets/img/backgrounds/tile-howto.png';

export default defineComponent({
  props: {
    link: {
      type: String,
      default: '/how-to-guides',
    },
    image: {
      type: String,
      default: defaultImg,
    },
  },
});
</script>

<style lang="scss" scoped>
.how-to {
  position: relative;

  display: block;
  height: 270px;
  padding: 32px;
  overflow: hidden;

  border-radius: 16px;

  img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.title {
  position: relative;

  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
  line-height: 132%;
}
</style>
