<script setup lang="ts">
export interface KbxProgressStep { key:string; label:string; optional?:boolean }
const props=defineProps<{steps:KbxProgressStep[]; current:string}>()
const currentIndex=()=>Math.max(0,props.steps.findIndex(step=>step.key===props.current))
</script>

<template>
  <ol class="kbx-progress-steps" aria-label="업무 진행 단계" :style="{'--kbx-progress-step-count': String(steps.length)}">
    <li v-for="(step,index) in props.steps" :key="step.key" :class="{active:step.key===props.current,done:index<currentIndex()}" :aria-current="step.key===props.current?'step':undefined">
      <span class="number" aria-hidden="true">{{ index+1 }}</span>
      <span>{{ step.label }}</span>
      <small v-if="step.optional">선택</small>
    </li>
  </ol>
</template>

<style scoped>
.kbx-progress-steps{display:grid;grid-template-columns:repeat(var(--kbx-progress-step-count,4),minmax(0,1fr));list-style:none;margin:0;padding:0;border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface-muted)}.kbx-progress-steps li{min-height:var(--kbx-progress-step-height);display:flex;align-items:center;justify-content:center;gap:var(--kbx-space-2);border-right:var(--kbx-border-width) solid var(--kbx-color-border);font-size:var(--kbx-font-sm);color:var(--kbx-color-text-muted)}.kbx-progress-steps li:last-child{border-right:0}.kbx-progress-steps li.active{background:var(--kbx-color-surface);color:var(--kbx-color-primary);font-weight:600}.kbx-progress-steps li.done{color:var(--kbx-color-text);font-weight:500}.kbx-progress-steps .number{min-width:var(--kbx-progress-step-number-size);height:var(--kbx-progress-step-number-size);display:grid;place-items:center;border:var(--kbx-border-width) solid var(--kbx-color-border-strong);border-radius:50%;font-size:var(--kbx-font-xs)}.kbx-progress-steps li.active .number{border-color:var(--kbx-color-primary)}.kbx-progress-steps small{font-size:var(--kbx-font-xs);font-weight:400}
</style>
