<template>
  <li class="popover-links__link">
    <a
      class="popover-link"
      @click="$emit('link-action')"
    >
      <component
        class="popover-link__icon"
        :is="icon"
      />
      <span class="popover-link__text">{{ text }}</span>
    </a>
  </li>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
const PenIcon = defineAsyncComponent(() => import('@/components/icons/PenIcon.vue'));

export default {
  props: {
    icon: {
      type: String,
      default: '',
    },
    text: {
      type: String,
      default: '',
    },
  },
  components: {
    EyeIcon,
    TrashIcon,
    PenIcon,
  },
};
</script>

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

.popover-link {
  @include popover-link;

  &__icon {
    width: 30px;
    fill: $color-charcoal-dark;
    margin-right: 15px;
    display: flex;
    flex-basis: auto;
    flex-shrink: 0;
  }

  &__text {
    width: auto;
    display: flex;
    flex-basis: auto;
    flex-shrink: 0;
  }
}
</style>
