Conversion funnel

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

/**
 * Sessions down to orders. Only the last step is measured — it is the orders
 * the window actually holds — and the steps above it are that number scaled
 * back up through a fixed rate each, which the footer says out loud rather
 * than letting the chart imply four separate measurements.
 */
export function ConversionFunnel({ steps }: { steps: { label: string; value: number }[] }) {
  const top = steps[0]?.value ?? 0
  const bottom = steps[steps.length - 1]?.value ?? 0

  return (
    <Widget
      data-widget="widget-ecommerce-overview-conversion-funnel"
      title="Conversion funnel"
      description="How many sessions reached a cart, a checkout, and an order"
      className="h-full"
      footer={`${formatPercent(top === 0 ? 0 : bottom / top)} of sessions ended in an order. Sessions, carts and checkouts are modelled from the orders in the window.`}
    >
      <FunnelChart steps={steps} valueFormatter={formatCompact} showConversion />
    </Widget>
  )
}