Pipeline by stage

"use client"

import { formatCurrency } from "@/lib/format"
import { FunnelChart } from "@/components/ui/funnel-chart"
import { Widget } from "@/components/ui/widget"

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

export type PipelineByStageProps = {
  steps: { label: string; value: number }[]
  openDeals: number
}

/** Open value that has reached each stage, so the funnel narrows as it should. */
export function PipelineByStage({ steps, openDeals }: PipelineByStageProps) {
  return (
    <Widget
      data-widget="widget-ecommerce-sales-pipeline-by-stage"
      title="Pipeline by stage"
      description="Open value that has reached each stage"
      footer={`${openDeals} deals open`}
      className="h-full"
    >
      <FunnelChart steps={steps} valueFormatter={money} />
    </Widget>
  )
}