import type { AboutContent } from "@/data/about.data";

export default function AboutStats({ stats }: { stats: AboutContent["stats"] }) {
  return (
    <section className="mx-auto max-w-[1200px] px-6 pb-14">
      <div className="grid gap-3 rounded-[26px] bg-gradient-to-r from-[#5867ed] via-[#6261eb] to-[#7856ea] p-4 shadow-[0_18px_38px_rgba(91,87,231,0.2)] sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => <article key={stat.label} className="rounded-2xl border border-white/15 bg-white/10 p-5 text-center text-white backdrop-blur-sm"><p className="text-2xl font-extrabold tracking-[-0.05em]">{stat.value}</p><p className="mt-1 text-[12px] font-semibold text-[#e4e6ff]">{stat.label}</p></article>)}
      </div>
    </section>
  );
}