<template>
  <div class="info-row">
    <div class="rank">{{ rank }}</div>
    <div>
      <strong>{{ title }}</strong>
      <p>{{ note }}</p>
    </div>
    <span class="badge" :class="tone">{{ badge }}</span>
  </div>
</template>

<script setup>
defineProps({
  rank: String,
  title: String,
  note: String,
  badge: String,
  tone: String
})
</script>

<style scoped>
.info-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.rank { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--primary); font-size: 12px; font-weight: 850; box-shadow: inset 0 0 0 1px var(--line); }
.info-row strong { color: var(--ink); }
.info-row p { margin-top: 4px; color: var(--muted); }
</style>
