<template>
  <div
    :class="{ 'link-block--no-margin': noMargin}"
    class="link-block">
    <link-icon class="link-block__icon"/>
    <a
      :href="href"
      class="link-block__link"
      target="_blank">{{ value.text }}</a>
  </div>
</template>

<script>
  import LinkIcon from '@/components/icons/LinkIcon';

  export default {
    props: {
      value: Object,
      'no-margin': {
        default: false
      }
    },

    components: {
      LinkIcon
    },

    computed: {
      href() {
        const url = this.value.url;
        return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
      }
    }
  };
</script>

<style scoped lang="scss">
  .link-block {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;

    &--no-margin {
      margin-bottom: 0;
    }

    &__icon {
      width: 30px;
      height: 30px;
    }

    &__link {
      text-decoration: underline;
    }
  }
</style>
