import React from 'react'

export default function QuickstartChecklist({ title, summary, items }) {
  return (
    <section className="rounded-[30px] border border-emerald-300/20 bg-emerald-400/10 p-5 shadow-[0_22px_70px_rgba(2,6,23,0.2)] md:p-6">
      <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100/80">Checklist</p>
      <h3 className="mt-2 text-2xl font-semibold text-white">{title}</h3>
      {summary ? <p className="mt-3 text-sm leading-7 text-emerald-50/90">{summary}</p> : null}
      <ul className="mt-5 grid gap-3 md:grid-cols-2">
        {items.map((item) => (
          <li key={item} className="flex gap-3 rounded-[22px] border border-white/10 bg-black/20 px-4 py-4 text-sm leading-6 text-white">
            <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-emerald-300/20 bg-emerald-300/10 text-emerald-100">
              <i className="fa-solid fa-check text-[10px]" />
            </span>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </section>
  )
}