import React from "react";

interface DonutChartProps {
  data: { label: string; value: number }[];
  width?: number;
  height?: number;
  colors?: string[];
  strokeWidth?: number;
  onClick?: (item: { label: string; value: number }) => void;
  showLegend?: boolean;
  legendPosition?: "top" | "bottom" | "left" | "right";
}

const DonutChart: React.FC<DonutChartProps> = ({
  data,
  width = 300,
  height = 300,
  colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"],
  strokeWidth = 20,
  onClick,
  showLegend = true,
  legendPosition = "bottom",
}) => {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  const radius = (Math.min(width, height) - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  let cumulativeValue = 0;

  return (
    <div className="flex flex-col items-center">
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
        <circle
          cx={width / 2}
          cy={height / 2}
          r={radius}
          fill="transparent"
          stroke="#f0f0f0"
          strokeWidth={strokeWidth}
        />
        {data.map((item, index) => {
          const value = (item.value / total) * circumference;
          const offset = cumulativeValue;

          cumulativeValue += value;

          return (
            <circle
              key={item.label}
              cx={width / 2}
              cy={height / 2}
              r={radius}
              fill="transparent"
              stroke={colors[index % colors.length]}
              strokeWidth={strokeWidth}
              strokeDasharray={`${value} ${circumference - value}`}
              strokeDashoffset={-offset}
              transform={`rotate(-90 ${width / 2} ${height / 2})`}
              onClick={() => onClick && onClick(item)}
              style={{
                cursor: "pointer",
                transition: "stroke-dashoffset 0.3s ease, stroke 0.3s ease",
                filter: "drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2))",
              }}
            />
          );
        })}
      </svg>
      {showLegend && (
        <div
          className={`flex ${
            legendPosition === "top" || legendPosition === "bottom"
              ? "flex-row"
              : "flex-col"
          } mt-4`}
        >
          {data.map((item, index) => (
            <div
              key={item.label}
              className="flex items-center mr-4 p-2 rounded-lg shadow-md"
            >
              <div className="w-4 h-4 mr-2 rounded-full"></div>
              <span
                className="text-sm font-medium text-white"
                style={{
                  color: colors[index % colors.length],
                  margin: "5px",
                }}
              >
                {item.label} ({item.value})
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default DonutChart;