<script setup lang="ts">
import type { DynamicMenuElement } from '@/types.ts'

const componentProps = defineProps<{
  menu: DynamicMenuElement[]
  itemId?: number
  isHovering?: boolean | null
}>()
</script>

<template>
  <v-menu v-bind="componentProps" width="200">
    <template v-slot:activator="{ props }">
      <v-btn icon rounded :variant="componentProps.isHovering ? 'tonal' : 'text'" v-bind="props">
        <v-icon icon="mdi-dots-horizontal"></v-icon>
      </v-btn>
    </template>

    <v-list density="compact" class="mt-1">
      <template v-for="el in componentProps.menu" :key="el.id">
        <v-divider class="my-1" v-if="el.type === 'divider'"></v-divider>
        <v-list-item
          :disabled="el.disabled"
          v-else
          :color="el.color"
          @click="el.click && el.click(componentProps.itemId)"
        >
          <v-list-item-title>
            <v-icon class="mr-2" :color="el.color" :icon="el.icon"></v-icon>
            <span>{{ el.title }}</span>
          </v-list-item-title>
        </v-list-item>
      </template>
    </v-list>
  </v-menu>
</template>

<style scoped lang="scss"></style>
