---
interface Step {
  title: string;
  description: string;
}

interface Props {
  steps: Step[];
}

const { steps } = Astro.props;
---

<ol class="not-prose my-8 space-y-5">
  {
    steps.map((step, index) => (
      <li class="flex gap-4">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-white">
          <span>{index + 1}</span>
        </span>
        <div>
          <h4 class="font-bold text-base-content">{step.title}</h4>
          <p class="mt-1 text-sm leading-relaxed text-base-content/60">{step.description}</p>
        </div>
      </li>
    ))
  }
</ol>