<template>
  <a class="share-icon">
    <share-icon class="share-icon__icon" />
    <span class="share-icon__text">
      <template v-if="!final">Mit Lehrperson teilen</template>
      <template v-else>Nicht mehr teilen</template>
    </span>
  </a>
</template>

<script>
  const ShareIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon');

  export default {
    props: {
      final: {
        type: Boolean,
        default: false,
      },
    },
    components: {ShareIcon},
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .share-icon {
    display: flex;
    align-items: center;
    cursor: pointer;

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

    &__text {
      @include large-link;
    }
  }
</style>
