import React from 'react'

export default function DocsStepList({ items }) {
  return (
    <ol className="space-y-3">
      {items.map((item, index) => (
        <li key={item.title} className="flex gap-4 rounded-[24px] border border-white/10 bg-black/20 p-4">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-sky-300/20 bg-sky-300/10 text-sm font-semibold text-sky-100">
            {index + 1}
          </div>
          <div className="min-w-0">
            <h3 className="text-base font-semibold text-white">{item.title}</h3>
            <p className="mt-1 text-sm leading-6 text-slate-300">{item.description}</p>
          </div>
        </li>
      ))}
    </ol>
  )
}