import type React from "react"
import { cn } from "@/lib/utils"

interface Feature {
  title: string
  description: string
  icon?: React.ReactNode
}

interface FeaturesSectionProps {
  title: string
  description?: string
  features: Feature[]
  columns?: 2 | 3 | 4
  className?: string
}

export function FeaturesSection({ title, description, features, columns = 3, className }: FeaturesSectionProps) {
  return (
    <section className={cn("w-full py-12 md:py-24 lg:py-32 bg-muted/50", 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-1 md:grid-cols-${columns} gap-8 mt-12`}>
          {features.map((feature, index) => (
            <div key={index} className="flex flex-col items-center space-y-2 border rounded-lg p-6 bg-background">
              {feature.icon && <div className="p-2 bg-primary/10 rounded-full">{feature.icon}</div>}
              <h3 className="text-xl font-bold">{feature.title}</h3>
              <p className="text-gray-500 dark:text-gray-400 text-center">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}