Plan mix

"use client"

import { formatNumber } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { DonutChart } from "@/components/ui/donut-chart"

export type PlanMixProps = {
  slices: { name: string; value: number }[]
  total: number
}

/** How the live book splits across the four tiers. */
export function PlanMix({ slices, total }: PlanMixProps) {
  return (
    <ChartCard
      data-widget="widget-saas-subscriptions-plan-mix"
      title="Plan mix"
      description="Subscriptions on the book, by tier"
      height={280}
      className="h-full"
    >
      <DonutChart
        data={slices}
        height={280}
        centerLabel="Live"
        centerValue={formatNumber(total, { maximumFractionDigits: 0 })}
        valueFormatter={(value) => `${formatNumber(value, { maximumFractionDigits: 0 })} accounts`}
      />
    </ChartCard>
  )
}