import { StandardizedPieChart } from "@/components/ui/StandardizedPieChart";
import type { AllocationSlice } from "@/types/dashboard";
import { formatMoney } from "@/utils/dashboard-utils";

export const DEFAULT_CHART_HEIGHT = 400;

export interface AllocationChartProps {
  slices: AllocationSlice[];
  currency?: string;
  piePalette: string[];
  height?: number;
}

export function AllocationChart({
  slices,
  currency,
  piePalette,
  height = DEFAULT_CHART_HEIGHT,
}: AllocationChartProps) {
  const chartData = slices.map((entry, index) => ({
    name: entry.label,
    value: entry.value,
    color: piePalette[index % piePalette.length],
  }));

  return (
    <div className="grid gap-4 md:grid-cols-[1.2fr_1fr]">
      <div className="min-w-0" style={{ height: `${height}px` }}>
        <StandardizedPieChart
          data={chartData}
          height={height}
          innerRadius={80}
          outerRadius={140}
          dataKey="value"
          nameKey="name"
          currency={currency}
        />
      </div>
      <div className="min-w-0 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
        <p className="text-[11px] uppercase tracking-[0.25em] text-slate-500">
          Breakdown
        </p>
        <div className="mt-2 space-y-2 text-sm text-slate-700">
          {slices.map((slice) => (
            <div key={slice.label} className="flex items-center justify-between">
              <span className="line-clamp-1">{slice.label}</span>
              <span className="font-semibold">
                {currency
                  ? formatMoney(slice.value, currency)
                  : slice.value.toLocaleString()}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}