import { PricingCards } from "@/registry/components/pricing-cards"

const plans = [
  {
    id: "basic",
    name: "Basic",
    description: "Perfect for getting started",
    price: { monthly: 9, yearly: 90, currency: "$" },
    features: [
      { text: "Up to 1,000 API calls", included: true },
      { text: "Basic support", included: true },
      { text: "Advanced analytics", included: false },
    ],
    cta: { text: "Get Started" },
  },
  {
    id: "pro",
    name: "Pro",
    description: "Best for growing businesses",
    price: { monthly: 29, yearly: 290, currency: "$" },
    features: [
      { text: "Up to 10,000 API calls", included: true },
      { text: "Priority support", included: true },
      { text: "Advanced analytics", included: true },
    ],
    cta: { text: "Start Free Trial" },
    popular: true,
  },
]

export function Component() {
  return (
    <PricingCards
      plans={plans}
      onPlanSelect={(planId) => console.log("Selected:", planId)}
    />
  )
}