import { CheckCircle2 } from "lucide-react";

export default function InfoGrid({
  items,
  title,
}: {
  items: string[];
  title: string;
}) {
  return (
    <section className="mx-auto max-w-[1120px] px-6 py-10">
      <h2 className="text-center text-2xl font-extrabold tracking-[-0.045em] text-[#111a42]">
        {title}
      </h2>
      <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {items.map((item) => (
          <article
            key={item}
            className="flex gap-3 rounded-xl border border-[#e5eaf4] bg-white p-4 text-[13px] leading-6 text-[#66738d] shadow-[0_4px_12px_rgba(51,66,116,0.035)]"
          >
            <CheckCircle2 size={17} className="mt-1 shrink-0 text-[#5f70ed]" />
            {item}
          </article>
        ))}
      </div>
    </section>
  );
}