---
const {
  kind = "note", // note | definition | these | objection | limite | scene | procedure
  title,
} = Astro.props;

const labels = {
  note: "Note",
  definition: "Définition",
  these: "Thèse",
  objection: "Objection",
  limite: "Limite",
  scene: "Scène",
  procedure: "Procédure",
};

const label = labels[kind] ?? "Note";
---
<section class={`callout callout-${kind}`}>
  <div class="callout-head">
    <span class="callout-badge">{label}</span>
    {title ? <strong class="callout-title">{title}</strong> : null}
  </div>
  <div class="callout-body">
    <slot />
  </div>
</section>

<style>
  .callout {
    border: 1px solid rgba(127,127,127,0.35);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 14px 0;
    background: rgba(127,127,127,0.06);
  }
  .callout-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
  }
  .callout-badge {
    font-size: 12px;
    border: 1px solid rgba(127,127,127,0.45);
    border-radius: 999px;
    padding: 2px 8px;
    opacity: 0.95;
  }
  .callout-title { font-weight: 700; }
  .callout-body :global(p:last-child) { margin-bottom: 0; }
</style>