Revenue by region

"use client"

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

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

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

/** Booked value split three ways, with the whole book in the middle. */
export function RevenueByRegion({ slices, total }: RevenueByRegionProps) {
  return (
    <ChartCard
      data-widget="widget-ecommerce-orders-overview-revenue-by-region"
      title="Revenue by region"
      description="Booked value, by where the order shipped"
      height={240}
      className="h-full"
    >
      <DonutChart
        data={slices}
        height={240}
        centerLabel="Booked"
        centerValue={compact(total)}
        valueFormatter={money}
      />
    </ChartCard>
  )
}