Channel mix

"use client"

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

/** Lifetime spend split by channel, largest share first; the slices arrive from the server. */
export function ChannelMix({ slices }: { slices: { name: string; value: number }[] }) {
  const total = slices.reduce((sum, slice) => sum + slice.value, 0)
  const lead = slices[0]

  return (
    <ChartCard
      data-widget="widget-crm-marketing-channel-mix"
      title="Channel mix"
      description="Lifetime spend by channel"
      height={300}
      className="h-full"
      footer={`${lead.name} takes ${Math.round((lead.value / total) * 100)}% of everything spent so far.`}
    >
      <DonutChart
        data={slices}
        height={300}
        centerLabel="Total spend"
        centerValue={formatCurrency(total, "USD", { compact: true })}
        valueFormatter={(value) => formatCurrency(value, "USD", { maximumFractionDigits: 0 })}
      />
    </ChartCard>
  )
}