Billing Upgrade Prompt

import BillingUpgradePrompt from "@/components/ui/billing-upgrade-prompt";
import { BarChart3, ShieldCheck, Users, Zap } from "lucide-react";

export default function Default() {
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-background p-6 text-foreground">
      <div className="w-full max-w-md">
        <BillingUpgradePrompt
          currentPlan={{ id: "free", name: "Free" }}
          recommendedPlan={{
            id: "pro",
            name: "Pro",
            price: 20,
            billingPeriod: "monthly",
          }}
          reason="usage_limit"
          limitedTime
          showSavings
          savingsAmount={40}
          features={[
            {
              name: "Unlimited projects",
              description: "Create as many projects as you need",
              icon: Zap,
            },
            {
              name: "Advanced analytics",
              description: "Track performance with detailed insights",
              icon: BarChart3,
            },
            {
              name: "Team collaboration",
              description: "Invite up to 10 team members",
              icon: Users,
            },
            {
              name: "Priority support",
              description: "Get help within 24 hours",
              icon: ShieldCheck,
            },
          ]}
          onUpgrade={() => {}}
          onDismiss={() => {}}
          onLearnMore={() => {}}
        />
      </div>
    </div>
  );
}