import * as React from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Plan {
  name: string;
  monthly: number;
  yearly: number;
  description: string;
  features: string[];
  popular?: boolean;
}

const DEFAULT_PLANS: Plan[] = [
  {
    name: "Free",
    monthly: 0,
    yearly: 0,
    description: "Everything you need to explore.",
    features: ["Browse the registry", "Live previews", "2 copies per day"],
  },
  {
    name: "Pro",
    monthly: 20,
    yearly: 16,
    description: "For engineers shipping weekly.",
    features: ["Unlimited copies", "MCP server access", "Pro-only components", "Priority support"],
    popular: true,
  },
  {
    name: "Team",
    monthly: 60,
    yearly: 48,
    description: "Shared registries for your team.",
    features: ["Everything in Pro", "Private registry", "SSO + audit log", "5 seats"],
  },
];

export function PricingSwitch({
  plans = DEFAULT_PLANS,
  className,
}: {
  plans?: Plan[];
  className?: string;
}) {
  const [yearly, setYearly] = React.useState(false);

  return (
    <div className={cn("w-full", className)}>
      <div className="mb-8 flex items-center justify-center gap-3 text-sm">
        <span className={cn(!yearly && "font-medium")}>Monthly</span>
        <button
          role="switch"
          aria-checked={yearly}
          onClick={() => setYearly((value) => !value)}
          className={cn(
            "relative h-6 w-11 rounded-full border transition-colors",
            yearly ? "bg-primary" : "bg-muted"
          )}
        >
          <span
            className={cn(
              "absolute top-0.5 size-4.5 rounded-full bg-background shadow transition-all",
              yearly ? "start-[22px]" : "start-0.5"
            )}
          />
        </button>
        <span className={cn(yearly && "font-medium")}>Yearly</span>
        <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          Save 20%
        </span>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={cn(
              "relative flex flex-col rounded-xl border bg-card p-6 transition-shadow",
              plan.popular && "border-primary/40 shadow-lg"
            )}
          >
            {plan.popular && (
              <span className="absolute -top-2.5 start-6 rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-medium text-primary-foreground">
                Most popular
              </span>
            )}

            <h3 className="text-sm font-medium">{plan.name}</h3>
            <p className="mt-1 text-xs text-muted-foreground">{plan.description}</p>

            <div className="mt-5 flex items-baseline gap-1">
              <span
                key={String(yearly)}
                className="text-3xl font-semibold tabular-nums duration-300 animate-in fade-in slide-in-from-bottom-1"
              >
                {"$" + (yearly ? plan.yearly : plan.monthly)}
              </span>
              <span className="text-sm text-muted-foreground">/mo</span>
            </div>

            <ul className="mt-6 flex-1 space-y-2.5">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-start gap-2 text-sm">
                  <Check className="mt-0.5 size-4 shrink-0 text-emerald-500" />
                  <span className="text-muted-foreground">{feature}</span>
                </li>
              ))}
            </ul>

            <button
              className={cn(
                "mt-6 h-9 rounded-md text-sm font-medium transition-colors",
                plan.popular
                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
                  : "border hover:bg-accent"
              )}
            >
              {plan.monthly === 0 ? "Get started" : "Upgrade"}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}
Related components
