<template>
  <a class="button-with-icon-and-text">
    <component
      :is="icon"
      class="button-with-icon-and-text__icon"/>
    <span class="button-with-icon-and-text__text">{{ text }}</span>
  </a>
</template>

<script>
  import DocumentIcon from '@/components/icons/DocumentIcon';
  import DocumentWithLinesIcon from '@/components/icons/DocumentWithLinesIcon';

  export default {
    props: {
      icon: {
        type: String,
        default: ''
      },
      text: {
        type: String,
        default: ''
      }
    },

    components: {
      DocumentIcon,
      DocumentWithLinesIcon
    }
  };
</script>

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

  .button-with-icon-and-text {
    display: flex;
    align-items: center;
    cursor: pointer;

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

    &__text {
      @include small-text;
    }
  }
</style>
