"use client";

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

interface StateTransition {
  from: string;
  to: string;
  label?: string;
}

interface DiagramStateProps {
  states: string[];
  transitions: StateTransition[];
  initialState?: string;
  finalStates?: string[];
  title?: string;
  caption?: string;
  id?: string;
  showShare?: boolean;
  fontSize?: string;
}

export const DiagramState: React.FC<DiagramStateProps> = ({
  states,
  transitions,
  initialState,
  finalStates = [],
  title,
  caption,
  id,
  showShare = true,
  fontSize = "16px",
}) => {
  const stateGraph = `stateDiagram-v2
${initialState ? `    [*] --> ${initialState}` : ""}
${(transitions || [])
      .map((t) => {
        const label = t.label ? ` : ${t.label}` : "";
        return `    ${t.from} --> ${t.to}${label}`;
      })
      .join("\n")}
${(finalStates || []).map((s) => `    ${s} --> [*]`).join("\n")}`;

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