<script setup lang="ts">
import type { KbxHelpContent } from '@kbx/contracts'

defineProps<{ content: KbxHelpContent }>()
</script>

<template>
  <aside class="kbx-help-panel">
    <header><h2>{{ content.title }}</h2></header>
    <p>{{ content.purpose }}</p>
    <section v-if="content.steps?.length">
      <h3>사용순서</h3>
      <ol><li v-for="step in content.steps" :key="step">{{ step }}</li></ol>
    </section>
    <section v-if="content.shortcuts?.length">
      <h3>단축키</h3>
      <dl><template v-for="item in content.shortcuts" :key="item.key"><dt>{{ item.key }}</dt><dd>{{ item.description }}</dd></template></dl>
    </section>
    <section v-if="content.cautions?.length">
      <h3>주의</h3>
      <ul><li v-for="item in content.cautions" :key="item">{{ item }}</li></ul>
    </section>
  </aside>
</template>

<style scoped>
.kbx-help-panel { width:min(390px, 92vw); padding:16px; font-size:14px; line-height:1.55; }
h2 { margin:0 0 8px; font-size:18px; } h3 { margin:18px 0 6px; font-size:14px; } ol, ul { padding-left:20px; } dl { display:grid; grid-template-columns:72px 1fr; gap:6px 10px; } dt { font-weight:700; } dd { margin:0; }
</style>
