---
interface Decision {
  n: number;
  choice: string;
  alternative: string;
  rationale: string;
}
interface Props {
  decisions: Decision[];
}
const { decisions } = Astro.props;
---

<ol class="flex flex-col gap-5">
  {
    decisions.map((dec) => (
      <li class="rounded-md border border-line bg-surface-1 p-5">
        <p class="flex gap-3">
          <span class="font-mono text-body font-semibold text-accent">
            {String(dec.n).padStart(2, '0')}
          </span>
          <span class="font-semibold text-ink">{dec.choice}</span>
        </p>
        <p class="mt-2 pl-8 text-small text-ink-faint">
          <span class="font-mono">alt:</span> {dec.alternative}
        </p>
        <p class="mt-2 pl-8 text-body text-ink-muted">{dec.rationale}</p>
      </li>
    ))
  }
</ol>
