export type StatsProps = {
  heading?: string;
  stats?: Array<{ value: string; label: string; description?: string }>;
};

export default function Stats({ heading = '', stats = [] }: StatsProps) {
  return (
    <section className="bg-background">
      <div className="section-shell py-20 sm:py-24">
        <div className="max-w-3xl">
          {heading && <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>}
        </div>
        <div className="mt-12 grid gap-x-10 gap-y-8 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat, index) => (
            <div key={index} className="py-4">
              <p className="text-4xl font-normal tracking-[-0.04em] sm:text-5xl">{stat.value}</p>
              <p className="mt-3 text-sm font-medium">{stat.label}</p>
              {stat.description && <p className="mt-2 text-sm leading-6 text-muted-foreground">{stat.description}</p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}