<template>
  <div
    :class="{ 'cms-document-block--solution': solution }"
    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>
import { defineAsyncComponent } from 'vue';

const DocumentIcon = defineAsyncComponent(() =>
  import('@/components/icons/DocumentIcon.vue')
);

export default {
  props: {
    value: Object,
    solution: {
      type: Boolean,
      default: false,
    },
  },

  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;
  }

  $parent: &;

  &--solution {
    margin-bottom: $small-spacing;

    #{$parent}__link {
      color: $color-silver-dark;
    }

    #{$parent}__icon {
      fill: $color-silver-dark;
    }
  }
}
</style>
