<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>
const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');

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>
