<script setup lang="ts">
defineProps<{
  title: string
  tag?: 'cyan' | 'purple' | 'amber'
}>()
</script>

<template>
  <div class="section-header">
    <div class="section-title">
      <span class="section-slash">//</span>
      <span class="section-name">{{ title }}</span>
    </div>
    <span v-if="tag" class="section-tag" :class="tag">
      {{ title.split(' ')[0] }}
    </span>
  </div>
</template>

<style scoped>
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.section-slash {
  color: var(--text-dim);
  margin-right: 8px;
}

.section-name {
  color: var(--text-primary);
  text-transform: uppercase;
}

.section-tag {
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-tag.cyan {
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 245, 212, 0.2);
}

.section-tag.purple {
  background: var(--accent-purple-dim);
  color: var(--accent-purple);
  border: 1px solid rgba(123, 44, 191, 0.2);
}

.section-tag.amber {
  background: var(--accent-amber-dim);
  color: var(--accent-amber);
  border: 1px solid rgba(249, 168, 37, 0.2);
}
</style>
