"use client";

import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { DonutChart, HBarChart, CHART_COLORS } from "@/components/ui/charts";
import { fmtMoney } from "@/lib/format";

export function SourceMix({ bySource, expenses, currency }: { bySource: { name: string; color: string; value: number; revenue: number }[]; expenses: { name: string; value: number }[]; currency: string }) {
  const total = bySource.reduce((s, x) => s + x.revenue, 0);
  return (
    <Card>
      <CardHeader title="Channels & costs" description="Revenue by source · expenses by category" />
      <CardContent className="grid gap-4 sm:grid-cols-2">
        <DonutChart data={bySource.map((s) => ({ name: s.name, value: s.revenue, color: s.color }))} money height={160} centerValue={fmtMoney(total, currency, { compact: true, whole: true })} centerLabel="revenue" className="sm:flex-col" />
        {expenses.length ? <HBarChart data={expenses} money color={CHART_COLORS.gold} height={170} /> : <p className="self-center text-sm text-fg-muted">No expenses in this period.</p>}
      </CardContent>
    </Card>
  );
}