"use client";

import React from "react";
import { Mermaid } from "./Mermaid";

interface PieSlice {
  label: string;
  value: number;
}

interface DiagramPieProps {
  data: PieSlice[];
  title?: string;
  caption?: string;
  id?: string;
  showShare?: boolean;
  fontSize?: string;
}

export const DiagramPie: React.FC<DiagramPieProps> = ({
  data,
  title,
  caption,
  id,
  showShare = true,
  fontSize = "16px",
}) => {
  const pieGraph = `pie
${(data || []).map((slice) => `    "${slice.label}" : ${slice.value}`).join("\n")}`;

  return (
    <div className="my-12">
      <Mermaid
        graph={pieGraph}
        id={id}
        title={title}
        showShare={showShare}
        fontSize={fontSize}
      />
      {caption && (
        <div className="text-center text-xs text-slate-400 mt-4 italic">
          {caption}
        </div>
      )}
    </div>
  );
};