<script setup lang="ts">
import {motion, type MotionValue} from "motion-v";

const {
    x,
    y,
    name,
    img = undefined,
    color = 'bg-white',
    hOffset = undefined,
    vOffset = undefined,
} = defineProps<{
    x: MotionValue<number>,
    y: MotionValue<number>,
    name: string,
    img?: string,
    color?: string,
    hOffset?: string,
    vOffset?: string,
}>()

const isHoveringParent = ref(false)

const roundedDivClass = `rounded-full w-full h-full absolute ${color}`

const hOffsetValue = hOffset === undefined ? '' : hOffset
const vOffsetValue = vOffset === undefined ? '' : vOffset
const computedClass = `w-20 h-20 absolute avatar ${hOffsetValue} ${vOffsetValue}`

</script>

<template>
    <motion.div
        ref="elementRef"
        :class="computedClass"
        :style="{ x, y }"
        :while-hover="{ scale: 3 }"
        @hover-start="event => {isHoveringParent=true}"
        @hover-end="event => {isHoveringParent=false}">

        <div v-if="img !== undefined" class="mask mask-squircle w-24">
            <NuxtImg :src="img"/>
        </div>
        <div v-else :class="roundedDivClass"/>

        <motion.p
            v-show="isHoveringParent"
            class="-top-8 absolute text-xs"
            :initial="{ opacity: 0 }"
            :animate="{ opacity: 1 }"
            :exit="{ opacity: 0 }">
            {{ name }}
        </motion.p>
    </motion.div>
</template>

<style scoped>
* {
    overflow: visible;
}
</style>