Plan comparison

import { useState } from "react"
import { PlanComparison } from "@/components/ui/plan-comparison"

const plans = [
  { id: "starter", name: "Starter", description: "For trying things out.", price: { monthly: 0, yearly: 0 }, features: ["40 components", "Community support", "Personal projects"], cta: "Start free" },
  { id: "team", name: "Team", description: "For shipping a product.", price: { monthly: 24, yearly: 19 }, features: ["Every component and block", "Private repository access", "Email support", "Unlimited projects"], cta: "Choose Team", highlighted: true, badge: "Most popular" },
  { id: "business", name: "Business", description: "For admin controls.", price: { monthly: 48, yearly: 40 }, features: ["Everything in Team", "Priority support", "Seat management", "Custom license terms"], cta: "Choose Business" },
  { id: "enterprise", name: "Enterprise", description: "For custom needs.", price: "Talk to us", features: ["Everything in Business", "Security review", "Dedicated contact"], cta: "Contact sales" },
];

export function PlanComparisonDemo() {
  const [, setLog] = useState("");
  return (
    <PlanComparison plans={plans} description="Pay per seat. Change plans or cancel at any time." onSelect={(id, billing) => setLog(`Selected ${id} (${billing})`)} footer="Prices in USD. Taxes added at checkout." />
  );
}