interface Stat {
  value: string
  label: string
}

interface StatsSectionProps {
  title: string
  description?: string
  stats: Stat[]
  columns?: 2 | 3 | 4
  className?: string
}

export function StatsSection({ title, description, stats, columns = 4, className }: StatsSectionProps) {
  return (
    <section className={`w-full py-12 md:py-24 lg:py-32 ${className}`}>
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">{title}</h2>
            {description && (
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                {description}
              </p>
            )}
          </div>
        </div>
        <div className={`grid grid-cols-2 md:grid-cols-${columns} gap-8 mt-12`}>
          {stats.map((stat, index) => (
            <div key={index} className="flex flex-col items-center space-y-2">
              <h3 className="text-3xl font-bold sm:text-4xl md:text-5xl text-primary">{stat.value}</h3>
              <p className="text-gray-500 dark:text-gray-400 text-center">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}