Price summary

"use client";
import * as React from "react";
import { PriceSummary } from "@/components/ui/notchset/blocks/price-summary";
import { SegmentedControl } from "@/components/ui/notchset/segmented-control";

const cents = (n: number) => "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/* moving 8 seats from Growth ($48) to Scale ($79), 13 days before the cycle renews */
export default function PriceSummaryDemo() {
  const [seats, setSeats] = React.useState("8");
  const n = Number(seats);
  const today = Math.round(((n * (79 - 48) * 13) / 31) * 100) / 100;
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <SegmentedControl size="sm" label="Seats" value={seats} onValueChange={setSeats} options={["6", "8", "10"].map((v) => ({ value: v, label: `${v} seats` }))} />
      <PriceSummary
        lines={[
          { label: `${n} seats × $79`, value: `${cents(n * 79)} a month` },
          { label: "Charged today", value: cents(today), note: "for the 13 days left in this cycle", total: true },
          { label: "From Nov 1", value: cents(n * 79), note: "a month on the card ending 4242", total: true },
        ]}
        note="Scale starts as soon as you confirm, and you can still undo it for a few seconds."
      />
    </div>
  );
}