<template>
  <div id="tag" ref="tag" class="hud-container hidden z-50 transform -translate-y-1/2">
    <div class="hud-panel p-5 text-white text-3xl flex flex-col justify-center items-center">
      <span class="tag_name mr-5">
        {{ data?.title || "" }}
      </span>
      <div class="flex flex-col items-start">
        <span v-for="(value, index) in data?.content" :key="index" class="text-xl">
          {{ value || "" }}
        </span>
      </div>
    </div>

    <div class="hud-connector">
      <div class="hud-connector-line"></div>
      <div class="hud-connector-dot"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineProps } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});

const tag = ref(null);

defineExpose({
  tagDom: tag
})

</script>

<style scoped>
:root {
  --hud-cyan: #35f5ff;
  --hud-cyan-soft: rgba(53, 245, 255, 0.4);
  --hud-bg: #1b1f26;
  --hud-panel-bg: #2a303a;
}

.hud-container {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hud-panel {
  position: relative;
  background: radial-gradient(circle at top left, #3b4656 0%, #1b1f26 55%, #11151b 100%);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(53, 245, 255, 0.15),
    0 0 18px rgba(53, 245, 255, 0.35),
    inset 0 0 12px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.hud-panel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  border: 1px solid rgba(53, 245, 255, 0.35);
  box-shadow: 0 0 12px rgba(53, 245, 255, 0.4);
  opacity: 0.9;
}

.hud-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hud-connector-line {
  width: 2px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(53, 245, 255, 0.7), rgba(53, 245, 255, 0));
  box-shadow: 0 0 6px rgba(53, 245, 255, 0.8);
}

.hud-connector-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0%, #35f5ff 40%, #0b1518 100%);
  box-shadow:
    0 0 8px rgba(53, 245, 255, 0.9),
    0 0 16px rgba(53, 245, 255, 0.7);
}
</style>
