import type { NodeProps } from "@xyflow/react";
import type { DiagramNode } from "../graph";

export function SeqFragmentNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const fragmentType = d.label; // "alt" | "loop" | "opt"
  const guardCondition = d.tag;

  return (
    <div className="seq-fragment">
      <div className="seq-fragment-header">
        <span className="seq-fragment-type">{fragmentType}</span>
        {guardCondition && (
          <span className="seq-fragment-guard">{guardCondition}</span>
        )}
      </div>
    </div>
  );
}
