<template>
  <div class="instruction" v-if="me.isTeacher">
    <bulb-icon class="instruction__icon"></bulb-icon>
    <a class="instruction__link" :href="value.url">{{text}}</a>
  </div>
</template>

<script>
  import me from '@/mixins/me';
  import BulbIcon from '@/components/icons/BulbIcon';

  export default {
    props: ['value'],

    mixins: [me],

    components: {
      BulbIcon
    },

    computed: {
      text() {
        return this.value.text ? this.value.text : 'Anweisungen'
      }
    }
  }
</script>

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

  .instruction {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;

    &__icon {
      width: 40px;
      height: 40px;
      background-color: $color-brand;
      fill: $color-white;
      border-radius: 20px;
      margin-right: $small-spacing;
    }

    &__link {
      @include heading-3;
    }
  }
</style>
