<template>
  <div
    class="instruction"
    v-if="me.isTeacher">
    <bulb-icon class="instruction__icon"/>
    <a
      :href="value.url"
      class="instruction__link">{{ 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;
      margin-right: $small-spacing;
    }

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