<template>
  <span
    v-if="!!helpLink || !!activityLink"
    class="bms-short-link-menu"
    :class="{ 'bms-short-link-menu__outline': outline }"
  >
    <BmsIconButton
      v-if="!!helpLink"
      tooltip-text="Voir la documentation"
      :to="helpLink"
      target="_blank"
    >
      <slot name="documentationIcon">
        <AnimatedCircleHelpIcon />
      </slot>
    </BmsIconButton>
    <BmsIconButton
      v-if="!!activityLink"
      tooltip-text="Voir l'activité"
      :to="activityLink"
      target="_self"
    >
      <slot name="activityIcon">
        <AnimatedActivityIcon />
      </slot>
    </BmsIconButton>
  </span>
</template>

<script setup lang="ts">
import { RouteLocationRaw } from 'vue-router';
import BmsIconButton from '@/components/button/BmsIconButton.vue';
import AnimatedCircleHelpIcon from '@/assets/animated-icons/AnimatedCircleHelpIcon.vue';
import AnimatedActivityIcon from '@/assets/animated-icons/AnimatedActivityIcon.vue';

withDefaults(
  defineProps<{
    outline: boolean;
    helpLink: string | RouteLocationRaw | null;
    activityLink: string | RouteLocationRaw | null;
  }>(),
  { outline: false, helpLink: null, activityLink: null },
);
</script>

<style scoped lang="scss">
.bms-short-link-menu {
  display: flex;
  height: fit-content;
  width: fit-content;
  margin-left: 0.5em;
  align-self: center;
  border-radius: var(--bms-border-radius);

  &__outline {
    border: 1px solid var(--bms-border-color);
  }
}
</style>
