Upgrade card

"use client";
import * as React from "react";
import { UpgradeCard } from "@/components/ui/notchset/blocks/upgrade-card";

const NOW = new Date("2026-10-22T14:00:00");
const SPENT = { window: 1, week: 0.48, windowResetsAt: "2026-10-22T16:10:00", weekResetsAt: "2026-10-26T09:00:00" };
const PLANS = [
  { key: "plus", name: "Plus", price: "$20", unit: "a month", desc: "Every model, projects and voice", current: true },
  { key: "pro", name: "Pro", price: "$60", unit: "a month", desc: "5× the use of Plus, long runs" },
  { key: "team", name: "Team", price: "$30", unit: "a seat a month", desc: "Shared projects and admin" },
];

export default function UpgradeCardDemo() {
  const [queued, setQueued] = React.useState(false);
  const [cycle, setCycle] = React.useState("monthly");
  const [done, setDone] = React.useState<string | null>(null);
  return (
    <div className="flex max-w-[560px] flex-col gap-2">
      <UpgradeCard
        usage={SPENT}
        now={NOW}
        plan="Plus"
        next={{ key: "pro", name: "Pro", adds: "gives you five times as much use" }}
        onUpgrade={(k) => setDone(`Checkout for ${PLANS.find((p) => p.key === k)?.name ?? k} would open here (sample)`)}
        onSendWhenReset={() => setQueued(true)}
        queued={queued ? { onCancel: () => setQueued(false) } : undefined}
        compare={{ plans: PLANS, cycle, cycles: [{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly · 2 months free" }], onCycle: setCycle }}
      />
      {done && <span className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">{done}</span>}
    </div>
  );
}