Movement summary

"use client";
import * as React from "react";
import { MovementSummary } from "@/components/ui/notchset/blocks/movement-summary";

const k = (v: number) => `$${Math.round(v / 1000)}k`;
const deals = (n: number) => `${n} ${n === 1 ? "deal" : "deals"}`;

export default function MovementSummaryDemo() {
  const [picked, setPicked] = React.useState<string | null>(null);
  return (
    <MovementSummary
      format={k}
      countLabel={deals}
      selected={picked}
      onSelect={setPicked}
      className="w-full max-w-[640px]"
      items={[
        { key: "up", label: "Improved", value: 313500, count: 4, tone: "up", trend: [80, 120, 60, 140, 210, 313] },
        { key: "down", label: "Worsened", value: -445000, count: 3, tone: "down", trend: [200, 90, 160, 120, 300, 445] },
      ]}
    />
  );
}