<script setup lang="ts">
/** 日志详情弹窗的摘要头(放 NModal #header):kind 小标签 + 标题(旁徽章 slot)
 *  + mono 副行 + chips 行;三个日志详情共用同构头部。 */
export interface HeroChip {
  label: string
  value: string
  mono?: boolean
}

defineProps<{ kind: string; title: string; sub?: string; chips?: HeroChip[]; titleMono?: boolean }>()
</script>

<template>
  <div class="min-w-0 pb-1">
    <div class="text-[11px] font-semibold tracking-[0.08em] text-ink-3 uppercase">{{ kind }}</div>
    <div class="mt-1 flex flex-wrap items-center gap-2 text-base leading-6 font-semibold">
      <span class="break-all" :class="titleMono ? 'mono' : ''">{{ title }}</span>
      <slot />
    </div>
    <div v-if="sub" class="mono mt-1 text-[11.5px] font-normal break-all text-ink-3">
      {{ sub }}
    </div>
    <div v-if="chips?.length" class="mt-2.5 flex flex-wrap gap-1.5">
      <span
        v-for="c in chips"
        :key="c.label"
        class="inline-flex items-center gap-1.5 rounded-full border border-line bg-white px-2.5 py-[3px] text-[11.5px] font-normal text-ink-2"
      >
        <span class="text-ink-3">{{ c.label }}</span>
        <span :class="c.mono ? 'mono' : ''">{{ c.value }}</span>
      </span>
    </div>
  </div>
</template>
