'use client';

/**
 * Lazy, code-split wrappers around the shared `@bytelyst/charts` /
 * `@bytelyst/data-viz` SVG primitives (UX-2 / CC.5). The chart code is pulled
 * into its own async chunk via `next/dynamic` so it never weighs down the
 * initial bundle of the (heavy) dashboard surfaces that embed it. The
 * primitives are pure SVG and token-themed (`--bl-*`, bridged in `globals.css`),
 * so they inherit admin's light/dark palette automatically.
 *
 * Replaces the previous direct `recharts` usage on the dashboard, usage,
 * per-user, client-logs and extraction-entity surfaces.
 */
import dynamic from 'next/dynamic';

function ChartFallback() {
  return (
    <div
      className="h-full min-h-[200px] w-full animate-pulse rounded-md bg-muted"
      aria-hidden="true"
    />
  );
}

export const AreaChart = dynamic(
  () => import('./primitives').then(m => ({ default: m.AreaChart })),
  { ssr: false, loading: ChartFallback }
);

export const BarChart = dynamic(() => import('./primitives').then(m => ({ default: m.BarChart })), {
  ssr: false,
  loading: ChartFallback,
});

export const LineChart = dynamic(
  () => import('./primitives').then(m => ({ default: m.LineChart })),
  { ssr: false, loading: ChartFallback }
);

export const Donut = dynamic(() => import('./primitives').then(m => ({ default: m.Donut })), {
  ssr: false,
  loading: ChartFallback,
});

export const Sparkline = dynamic(
  () => import('./primitives').then(m => ({ default: m.Sparkline })),
  { ssr: false, loading: ChartFallback }
);

export const KpiCard = dynamic(() => import('./primitives').then(m => ({ default: m.KpiCard })), {
  ssr: false,
  loading: ChartFallback,
});