Forecast bar

"use client";
import { ForecastBar, ForecastKey } from "@/components/ui/notchset/blocks/forecast-bar";

/* figures in $k: won, committed and best case against the team's target, with the call it submitted */
export default function ForecastBarDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <ForecastBar won={420} commit={310} best={180} target={1200} call={1180} size="lg" label="Team forecast against target" />
      <ForecastKey
        items={[
          { kind: "won", label: "Won" },
          { kind: "commit", label: "Commit" },
          { kind: "best", label: "Best case" },
          { kind: "target", label: "Target" },
          { kind: "call", label: "Call" },
        ]}
      />
      <ForecastBar won={180} commit={60} target={300} label="Ana against her target" />
    </div>
  );
}