<template>
  <n-popover trigger="hover" placement="top">
    <template #trigger>
      <div
        class="rounded-4xl aspect-square flex items-center justify-center mb-1"
        :style="`background-color: ${verificationColor}; width: ${
          props.size ?? 16
        }px; height: ${props.size ?? 16}px`"
      >
        <component
          :is="verificationIcon"
          fill="white"
          stroke="white"
          style="padding: 0.2rem"
        />
      </div>
    </template>
    <div class="max-w-xs">
      <div class="font-bold">{{ mark.title || "No title" }}</div>
      <div class="text-sm mt-1">{{ mark.description || "No description" }}</div>
    </div>
  </n-popover>
</template>

<script setup lang="ts">
import { computed } from "vue"
import type { SnVerification } from "~/types/api/publisher"
import {
  Wrench,
  BadgeCheck,
  ShieldCheck,
  Landmark,
  Palette,
  Code,
  Drama
} from "lucide-vue-next"

interface Props {
  mark: SnVerification
  size?: number
}

const props = defineProps<Props>()

// Icon mapping based on verification type
const verificationIcons = [
  Wrench, // 0: build_circle equivalent
  BadgeCheck, // 1: verified
  ShieldCheck, // 2: verified (alternative)
  Landmark, // 3: account_balance
  Palette, // 4: palette
  Code, // 5: code
  Drama // 6: masks
]

// Color mapping based on verification type
const verificationColors = [
  "#14b8a6", // teal
  "#03a9f4", // lightBlue
  "#3f51b5", // indigo
  "#f44336", // red
  "#ff9800", // orange
  "#2196f3", // blue
  "#448aff" // blueAccent
]

const verificationIcon = computed(() => {
  const type = props.mark.type
  return type >= 0 && type < verificationIcons.length
    ? verificationIcons[type]
    : BadgeCheck
})

const verificationColor = computed(() => {
  const type = props.mark.type
  return type >= 0 && type < verificationColors.length
    ? verificationColors[type]
    : "#2196f3"
})
</script>
