---
interface Feature {
  title: string;
  value: string;
  technical: string;
}
interface Props {
  features: Feature[];
}
const { features } = Astro.props;
---

<ol class="flex flex-col gap-5">
  {
    features.map((f, i) => (
      <li class="border-line bg-surface-1 rounded-md border p-5">
        <p class="flex gap-3">
          <span class="text-body text-accent font-mono font-semibold">
            {String(i + 1).padStart(2, '0')}
          </span>
          <span class="text-ink font-semibold">{f.title}</span>
        </p>
        <p class="text-body text-ink-muted mt-2 pl-8">{f.value}</p>
        <p class="text-small text-ink-faint border-line mt-2 ml-8 border-l pl-3">{f.technical}</p>
      </li>
    ))
  }
</ol>
