"use client";

import dynamic from "next/dynamic";

import { Skeleton } from "@/components/ui/skeleton";
import type { HeirShare } from "@/types/inheritance";

const DynamicResultsPieChart = dynamic(
  () =>
    import("@/components/calculator/results-pie-chart").then(
      (module) => module.ResultsPieChart,
    ),
  {
    ssr: false,
    loading: () => <Skeleton className="h-[320px] w-full" />,
  },
);

interface LazyResultsPieChartProps {
  shares: HeirShare[];
  currency: string;
}

export function LazyResultsPieChart({
  shares,
  currency,
}: LazyResultsPieChartProps) {
  return <DynamicResultsPieChart shares={shares} currency={currency} />;
}