<template>
  <div class="flex flex-col gap-0.5 w-full">
    <div v-if="label" class="flex justify-between items-end px-0.5">
      <div class="flex items-center gap-1 text-[#8f80a0]">
        <component :is="icon" v-if="icon" :size="10" />
        <span class="text-[10px] uppercase font-bold leading-none">{{ label }}</span>
      </div>
      <span class="text-[10px] font-mono text-[#e0d8f0] leading-none">{{ current }}/{{ max }}</span>
    </div>
    <div class="h-3 bg-[#0f0816] border border-[#4a3b5e] p-[1px] relative">
      <div 
        class="h-full transition-all duration-300 relative"
        :style="{ width: `${percentage}%`, backgroundColor: barColor }"
      >
        <!-- Shine effect -->
        <div class="absolute top-0 left-0 w-full h-[1px] bg-white opacity-30" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';

interface Props {
  current: number;
  max: number;
  type: 'hp' | 'energy' | 'mana';
  label?: string;
  icon?: Component;
}

const props = defineProps<Props>();

const percentage = computed(() => Math.min(100, Math.max(0, (props.current / props.max) * 100)));

const barColor = computed(() => {
  if (props.type === 'energy') return '#f6b26b'; // Orange
  if (props.type === 'mana') return '#2ce8f4'; // Cyan
  return '#d95763'; // HP Red (default)
});
</script>
