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

<script>
  import EyeIcon from '@/components/icons/EyeIcon';
  import TrashIcon from '@/components/icons/TrashIcon';
  import PenIcon from '@/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>
