"use client";

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

interface TimelineEvent {
  year: string;
  title: string;
}

interface DiagramTimelineProps {
  events: TimelineEvent[];
  title?: string;
  caption?: string;
  id?: string;
  showShare?: boolean;
  fontSize?: string;
}

export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
  events,
  title,
  caption,
  id,
  showShare = true,
  fontSize = "16px",
}) => {
  const timelineGraph = `timeline
    title ${title || "Timeline"}
${(events || []).map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;

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