<template>
  <div class="cms-document-block">
    <document-icon class="cms-document-block__icon" />
    <a
      :href="value.url"
      class="cms-document-block__link"
      target="_blank"
    >{{ value.display_text }}</a>

  </div>
</template>

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

  export default {
    props: {
      value: Object,
    },

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

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

  .cms-document-block {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    margin-bottom: $large-spacing;

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

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