Activity

"use client"

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

/**
 * Where the learner's time went. The shares arrive computed from the server
 * page; this is an island only because a chart draws in the browser.
 */
export function ActivityDonut({ mix }: { mix: { name: string; value: number }[] }) {
  return (
    <ChartCard
      data-widget="widget-academy-overview-activity-donut"
      title="Activity"
      description="How the term's hours were spent."
      height={208}
      className="h-full"
    >
      <DonutChart
        data={mix}
        height={208}
        innerRadius={52}
        centerLabel="Hours"
        valueFormatter={(value) => `${formatNumber(value)}h`}
      />
    </ChartCard>
  )
}