import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

type StatsProps = { content: ParticipantHomeContent["stats"] };

function Stats({ content }: StatsProps) {
  return (
    <div className="bg-participant-light dark:bg-participant-dark p-6 lg:p-12 flex items-center justify-center">
      <dl className="grid grid-cols-1 row-gap-8 md:grid-cols-3 gap-8 lg:gap-0 max-w-5xl">
        {content.stats.map((stat, index) => (
          <div key={index} className="text-center">
            <dd className="text-4xl font-bold lg:text-5xl xl:text-6xl">
              {stat.value}
            </dd>
            <dt className="text-sm font-medium tracking-widest uppercase lg:text-base text-gray-600 dark:text-gray-200">
              {stat.label}
            </dt>
          </div>
        ))}
      </dl>
    </div>
  );
}

export default Stats;