Waterfall

"use client";
import * as React from "react";
import { Waterfall } from "@/components/ui/notchset/blocks/waterfall";

const k = (v: number) => `$${v >= 1e6 ? `${(v / 1e6).toFixed(2).replace(/0$/, "")}M` : `${Math.round(v / 1000)}k`}`;
const deals = (n: number) => `${n} ${n === 1 ? "deal" : "deals"}`;
const STEPS = [
  { key: "new", label: "New", value: 64000, count: 1, detail: "Airtable" },
  { key: "pulled", label: "Pulled in", value: 152000, count: 1, detail: "Sentry" },
  { key: "raised", label: "Raised", value: 97500, count: 2, detail: "Stripe, Webflow" },
  { key: "won", label: "Won", value: 0, count: 0 },
  { key: "slipped", label: "Slipped", value: -271000, count: 1, detail: "Revolut" },
  { key: "lowered", label: "Lowered", value: -126000, count: 1, detail: "PostHog" },
  { key: "lost", label: "Lost", value: -48000, count: 1, detail: "Dropbox" },
];
const START = 1109300;

export default function WaterfallDemo() {
  const [picked, setPicked] = React.useState<string | null>(null);
  const end = START + STEPS.reduce((a, s) => a + s.value, 0);
  return (
    <Waterfall
      label="Won + commit, last Monday to now"
      start={{ label: "Last Monday", value: START }}
      end={{ label: "Now", value: end }}
      steps={STEPS}
      format={k}
      countLabel={deals}
      selected={picked}
      onSelect={setPicked}
      className="w-full max-w-[640px]"
    />
  );
}