MRR bridge

"use client"

import { formatCurrency } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { WaterfallChart, type WaterfallMovement } from "@/components/ui/waterfall-chart"

const money = (value: number) =>
  formatCurrency(value, "USD", { compact: true, maximumFractionDigits: 1 })

export type MrrMovementsProps = {
  movements: WaterfallMovement[]
  months: number
}

/** Where the book opened, what it won and lost, and where it closed. */
export function MrrMovements({ movements, months }: MrrMovementsProps) {
  return (
    <ChartCard
      data-widget="widget-saas-subscriptions-mrr-movements"
      title="MRR movements"
      description={`Opening to closing over ${months} months`}
      height={280}
      className="h-full"
      footer="New and churn only: a plan change leaves no trace in the rows, so there is nothing to call expansion."
    >
      <WaterfallChart data={movements} height={280} valueFormatter={money} />
    </ChartCard>
  )
}