<script setup>
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    badge: {
        type: [String, Array],
        default: null
    },
    subtitle: {
        type: String,
        default: null
    },
    batteryLevel: {
        type: Number,
        default: 80
    }
})
</script>

<template>
    <header class="h-12 border-b border-zinc-800 flex items-center justify-between px-4 bg-zinc-900/90 backdrop-blur z-20 shrink-0 select-none">
        <div class="flex items-center gap-2">
            <h1 class="font-bold text-sm uppercase tracking-tight text-white">{{ title }}</h1>

            <!-- Badge - can be string or array -->
            <template v-if="badge">
                <!-- Single badge (string) -->
                <span v-if="typeof badge === 'string'"
                      class="text-zinc-500 font-mono text-[10px] border border-zinc-800 px-1.5 py-0.5 rounded bg-zinc-900">
                    {{ badge }}
                </span>

                <!-- Multiple badges (array) -->
                <div v-else class="flex gap-1">
                    <span v-for="(item, index) in badge" :key="index"
                          class="text-[8px] uppercase font-bold px-1.5 py-0.5 rounded border border-zinc-700 bg-zinc-900 text-zinc-400">
                        {{ item }}
                    </span>
                </div>
            </template>

            <!-- Separator and Subtitle -->
            <template v-if="subtitle">
                <div class="h-4 w-px bg-zinc-800"></div>
                <span class="text-[10px] text-zinc-500">{{ subtitle }}</span>
            </template>
        </div>

        <div class="flex items-center gap-3">
            <!-- Battery Indicator -->
            <div class="flex items-center gap-1">
                <div class="w-6 h-3 rounded-xs border border-zinc-600 p-px relative flex">
                    <div class="h-full bg-zinc-400 rounded-[1px]" :style="{ width: `${batteryLevel}%` }"></div>
                    <div class="absolute -right-0.75 top-1/2 -translate-y-1/2 w-0.5 h-1.5 bg-zinc-600 rounded-r-[1px]"></div>
                </div>
            </div>
        </div>
    </header>
</template>
