import type { DiagramData } from "@filekit-studio/diagram";

export const pipelineData: DiagramData = {
  title: "Payment Processing Flow",
  direction: "LR",
  nodes: [
    { id: "frontend", label: "React Frontend", shape: "rounded", color: "indigo", badge: "UI" },
    { id: "auth", label: "Auth Guard", shape: "diamond", color: "amber", badge: "SEC" },
    { id: "processor", label: "Payment Processor", shape: "rounded", color: "purple" },
    { id: "database", label: "PostgreSQL DB", shape: "cylinder", color: "emerald", badge: "SQL" }
  ],
  edges: [
    { from: "frontend", to: "auth", label: "Login / Token" },
    { from: "auth", to: "processor", label: "Authorized" },
    { from: "processor", to: "database", label: "Save Record" }
  ]
};

"use client";

import React from "react";
import { Diagram } from "@filekit-studio/diagram";
import { pipelineData } from "@/data/architecture";

export default function ArchitecturePage() {
  return (
    <div className="w-full h-[500px] rounded-xl overflow-hidden border">
      <Diagram data={pipelineData} mode="viewer" autoFit={true} />
    </div>
  );
}