import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { PricingCard } from "@/components/blocks/pricing-card-block"

export function PricingCardSection() {
  return (
    <div className="space-y-6">
      <SectionHeading
        title="Pricing Card"
        description="A card component for displaying pricing tiers with features and call-to-action."
      />

      <ComponentContainer className="grid grid-cols-1 md:grid-cols-3 gap-4" title="">
        <PricingCard
          tier="Basic"
          price="$9"
          description="Essential features for individuals"
          features={["Up to 5 projects", "Basic analytics", "24-hour support response time", "1GB storage"]}
        />
        <PricingCard
          tier="Pro"
          price="$29"
          description="Advanced features for professionals"
          features={[
            "Unlimited projects",
            "Advanced analytics",
            "4-hour support response time",
            "10GB storage",
            "Custom integrations",
          ]}
          popular={true}
        />
        <PricingCard
          tier="Enterprise"
          price="$99"
          description="Complete solution for teams"
          features={[
            "Unlimited projects",
            "Advanced analytics & reporting",
            "1-hour support response time",
            "Unlimited storage",
            "Custom integrations",
            "Dedicated account manager",
          ]}
        />
      </ComponentContainer>
    </div>
  )
}