AI Pipeline Flow

"use client";

import React from "react";
import { ArrowRight, ChevronDown, CheckCircle2, Loader2, Database, ShieldAlert, FileSearch } from "lucide-react";

export default function AIPipelineFlow() {
    const steps = [
        { icon: <Database className="h-4 w-4" />, label: "ETL", status: "success" },
        { icon: <ShieldAlert className="h-4 w-4" />, label: "Guard", status: "success" },
        { icon: <FileSearch className="h-4 w-4" />, label: "Retrieve", status: "active" },
        { icon: <CheckCircle2 className="h-4 w-4" />, label: "Verify", status: "pending" },
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-2xl mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-10">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 tracking-tight">Data Pipeline Flow</h3>
                <span className="text-[10px] font-black text-blue-500 px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/20">LIVE: 142 req/min</span>
            </div>

            <div className="flex items-center justify-between gap-4 relative">
                <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-zinc-100 dark:bg-zinc-800 -translate-y-1/2 z-0" />

                {steps.map((s, i) => (
                    <div key={i} className="flex flex-col items-center gap-3 relative z-10 w-1/4">
                        <div className={`h-12 w-12 rounded-2xl border-2 flex items-center justify-center transition-all duration-500 ${s.status === "success" ? "bg-emerald-50 text-emerald-600 border-emerald-100 dark:bg-emerald-950/20 dark:border-emerald-800" :
                                s.status === "active" ? "bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/30" :
                                    "bg-zinc-50 text-zinc-300 border-zinc-100 dark:bg-zinc-900 dark:border-zinc-800"
                            }`}>
                            {s.status === "active" ? <Loader2 className="h-5 w-5 animate-spin" /> : s.icon}
                        </div>
                        <div className="text-center">
                            <p className={`text-[10px] font-black uppercase tracking-widest ${s.status === "pending" ? "text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
                                }`}>{s.label}</p>
                            <div className="mt-1 flex items-center justify-center gap-1 opacity-50">
                                <span className="h-1 w-1 rounded-full bg-zinc-400" />
                                <span className="text-[8px] font-bold text-zinc-500 uppercase tracking-tighter">0.2ms</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}