<script setup lang="ts">
// Monospace "NN — label" section header with an underline. Ported from
// landing-sections.jsx SectionLabel. Pass the full "01 — udfordringen" string.
import { useTheme } from '~/composables/useLanding'

const props = defineProps<{ label: string }>()
const t = useTheme()

const parts = computed(() => {
  const [index, ...rest] = props.label.split(' — ')
  return { index, text: rest.join(' — ') }
})
</script>

<template>
  <div :style="{
    display: 'flex', alignItems: 'center', gap: '14px',
    paddingBottom: '24px', marginBottom: '56px',
    borderBottom: `1px solid ${t.border}`,
    fontFamily: '\'JetBrains Mono\', monospace',
    fontSize: '11px', letterSpacing: '0.16em', textTransform: 'uppercase',
    color: t.fgMuted,
  }">
    <span :style="{ color: t.fgDim }">{{ parts.index }}</span>
    <span>—</span>
    <span>{{ parts.text }}</span>
  </div>
</template>
