---
interface Props {
  title: string;
  items: string[];
}

const { title, items } = Astro.props;
---

<div class="not-prose my-8">
  <h3 class="mb-4 text-xl font-bold text-base-content">{title}</h3>
  <ul class="grid gap-3 sm:grid-cols-2">
    {
      items.map((item) => (
        <li class="flex items-start gap-2 rounded-lg border border-base-300/60 bg-base-200/50 px-4 py-3 text-sm text-base-content/80">
          <span class="mt-0.5 text-secondary" aria-hidden="true">✓</span>
          <span>{item}</span>
        </li>
      ))
    }
  </ul>
</div>