<script setup lang="ts">
/**
 * SectionHeader — Titelzeile für Sektionen/Spalten im Dashboard V2
 *
 * Kapselt wiederholtes Muster: dot + label + count aus TaskBoard-Spalten
 * und Iris-Panel-Sektionen. Verwendet ausschließlich Token-Farben.
 */

withDefaults(defineProps<{
  label: string
  /** Status-Farbe des Dots: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao' */
  dotColor?: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao'
  /** Numerischer Count (rechts) */
  count?: number
  /** Variante: 'column' (Spalten-Header) oder 'section' (Iris-Panel) */
  variant?: 'column' | 'section'
}>(), {
  variant: 'column',
})

function dotColorVar(color: string): string {
  const map: Record<string, string> = {
    work: 'var(--st-work)',
    think: 'var(--st-think)',
    idle: 'var(--st-idle)',
    block: 'var(--st-block)',
    queue: 'var(--st-queue)',
    review: 'var(--st-queue)',    // orange-ähnlich
    iris: 'var(--a-purple)',
    bao: 'var(--a-blue)',
  }
  return map[color] || 'var(--st-idle)'
}

function dotRingVar(color: string): string {
  const map: Record<string, string> = {
    work: 'rgba(61, 220, 151, .25)',
    think: 'rgba(52, 214, 245, .25)',
    idle: 'rgba(107, 103, 150, .25)',
    block: 'rgba(251, 113, 133, .25)',
    queue: 'rgba(251, 191, 36, .25)',
    review: 'rgba(251, 146, 60, .25)',
    iris: 'rgba(181, 87, 246, .25)',
    bao: 'rgba(79, 124, 255, .25)',
  }
  return map[color] || 'rgba(107, 103, 150, .25)'
}
</script>

<template>
  <div class="section-header" :class="variant">
    <span
      class="section-dot"
      :style="{
        background: dotColorVar(dotColor || 'idle'),
        boxShadow: `0 0 0 2px ${dotRingVar(dotColor || 'idle')}`,
      }"
    ></span>
    <span class="section-label">{{ label }}</span>
    <span v-if="count !== undefined" class="section-count">{{ count }}</span>
    <slot />
  </div>
</template>

<style scoped>
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header.column {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.section-header.section {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.section-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx-2);
  font-family: 'Space Grotesk', sans-serif;
}

.section-header.section .section-label {
  font-size: 11px;
}

.section-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--glass-2);
  color: var(--tx-2);
  border: 1px solid var(--line);
}
</style>
