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

<script>
import me from '@/mixins/me';
import { defineAsyncComponent } from 'vue';
const BulbIcon = defineAsyncComponent(() => import('@/components/icons/BulbIcon.vue'));

export default {
  props: ['value'],

  mixins: [me],

  components: {
    BulbIcon,
  },

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

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

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

  &__icon {
    width: 30px;
    height: 30px;
    margin-right: $small-spacing;
  }

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