"use client";

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

interface GanttTask {
  id: string;
  name: string;
  start: string;
  duration: string;
  dependencies?: string[];
}

interface DiagramGanttProps {
  tasks: GanttTask[];
  title?: string;
  caption?: string;
  id?: string;
  showShare?: boolean;
  fontSize?: string;
}

export const DiagramGantt: React.FC<DiagramGanttProps> = ({
  tasks,
  title,
  caption,
  id,
  showShare = true,
  fontSize = "16px",
}) => {
  const ganttGraph = `gantt
    dateFormat YYYY-MM-DD
${(tasks || [])
      .map((task) => {
        const deps = task.dependencies?.length
          ? `, after ${task.dependencies.join(" ")}`
          : "";
        return `    ${task.name} :${task.id}, ${task.start}, ${task.duration}${deps}`;
      })
      .join("\n")}`;

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