"use client";

import dynamic from "next/dynamic";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface DonutChartProps {
  data: Array<{ name: string; value: number; color?: string }>;
  title?: string;
  centerText?: {
    title: string;
    value: string | number;
  };
  colors?: string[];
  height?: number;
  className?: string;
}

const ChartSkeleton = ({ height = 300 }: { height?: number }) => (
  <div className="animate-pulse relative" style={{ height }}>
    <div className="absolute inset-0 flex items-center justify-center">
      <div
        className="rounded-full bg-muted-foreground/20"
        style={{ width: "200px", height: "200px" }}
      />
      <div
        className="absolute rounded-full bg-background"
        style={{ width: "120px", height: "120px" }}
      />
    </div>
  </div>
);

const DonutChartInner = dynamic(() => import("./donut-chart-inner"), {
  ssr: false,
  loading: () => <ChartSkeleton />,
});

export default function ModernDonutChart({
  data,
  title,
  centerText,
  colors = [
    "hsl(var(--chart-1))",
    "hsl(var(--chart-2))",
    "hsl(var(--chart-3))",
    "hsl(var(--chart-4))",
    "hsl(var(--chart-5))",
  ],
  height = 300,
  className,
}: DonutChartProps) {
  return (
    <Card className={className}>
      {title && (
        <CardHeader>
          <CardTitle className="text-lg font-semibold">{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent>
        <DonutChartInner
          data={data}
          title={title}
          centerText={centerText}
          colors={colors}
          height={height}
        />
      </CardContent>
    </Card>
  );
}