mintel.me/apps/web/src/components/DiagramSequence.tsx

"use client";

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

interface SequenceMessage {
  from: string;
  to: string;
  message: string;
  type?: "solid" | "dotted" | "async";
}

interface DiagramSequenceProps {
  participants: string[];
  messages: SequenceMessage[];
  title?: string;
  caption?: string;
  id?: string;
  showShare?: boolean;
}

export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
  participants,
  messages,
  title,
  caption,
  id,
  showShare = true,
}) => {
  const getArrow = (type?: string) => {
    switch (type) {
      case "dotted":
        return "-->";
      case "async":
        return "->>";
      default:
        return "->";
    }
  };

  const sequenceGraph = `sequenceDiagram
${participants.map((p) => `    participant ${p}`).join("\n")}
${messages.map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;

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