import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"

interface PricingTier {
  name: string
  price: string
  description: string
  features: string[]
  actionLabel: string
  actionHref: string
  popular?: boolean
}

interface PricingSectionProps {
  title: string
  description?: string
  tiers: PricingTier[]
}

export function PricingSection({ title, description, tiers }: PricingSectionProps) {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32">
      <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-3 gap-8 mt-12">
          {tiers.map((tier, index) => (
            <div
              key={index}
              className={`flex flex-col justify-between p-6 rounded-lg border ${
                tier.popular ? "border-primary shadow-lg" : ""
              }`}
            >
              {tier.popular && (
                <div className="inline-block px-4 py-1 text-sm font-medium text-primary bg-primary/10 rounded-full mb-4 self-start">
                  Popular
                </div>
              )}
              <div>
                <h3 className="text-2xl font-bold">{tier.name}</h3>
                <div className="mt-4 flex items-baseline">
                  <span className="text-4xl font-bold">{tier.price}</span>
                  {tier.price !== "Custom" && <span className="ml-1 text-gray-500">/month</span>}
                </div>
                <p className="mt-4 text-gray-500 dark:text-gray-400">{tier.description}</p>
                <ul className="mt-6 space-y-3">
                  {tier.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center">
                      <Check className="h-4 w-4 text-primary mr-3 flex-shrink-0" />
                      <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <Button className="mt-8 w-full" variant={tier.popular ? "default" : "outline"}>
                {tier.actionLabel}
              </Button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}