<template>
    <MkTooltip
        ref="tooltip"
        :target-element="targetElement"
        :max-width="340"
        @closed="emit('closed')"
    >
        <div class="beeadbfb">
            <MagEmoji
                class="icon"
                :class="{
                    unicodeReaction: magIsUnicodeEmoji(reaction),
                }"
                :emoji="reaction"
                :is-reaction="true"
                :normal="true"
                :no-style="true"
            />
            <div class="name">{{ magReactionToLegacy(reaction) }}</div>
        </div>
    </MkTooltip>
</template>

<script lang="ts" setup>
import {} from "vue";
import MkTooltip from "./MkTooltip.vue";
import { magIsUnicodeEmoji, magReactionToLegacy } from "@/scripts-mag/mag-util";
import { types } from "magnetar-common";

const props = defineProps<{
    reaction: types.Reaction;
    targetElement: HTMLElement;
}>();

const emit = defineEmits<{
    (ev: "closed"): void;
}>();
</script>

<style lang="scss" scoped>
.beeadbfb {
    text-align: center;

    > .icon {
        display: block;
        width: 60px;
        margin: 0 auto;

        &.unicodeReaction {
            font-size: 60px;
        }
    }

    > .name {
        font-size: 0.9em;
    }
}
</style>
