<script setup lang="ts">
export interface FactPathStep {
  id: string;
  label: string;
  value: string;
  tone?: "neutral" | "ok" | "warn" | "error";
}
defineProps<{ steps: FactPathStep[]; label?: string }>();
</script>

<template>
  <ol class="fact-path" :aria-label="label || '事实路径'">
    <li
      v-for="(step, index) in steps"
      :key="step.id"
      :data-tone="step.tone || 'neutral'"
    >
      <span class="fact-path-index">{{ index + 1 }}</span>
      <span
        ><small>{{ step.label }}</small
        ><strong>{{ step.value }}</strong></span
      >
    </li>
  </ol>
</template>
