AI Multi-Agent Panel

"use client";

import React from "react";
import { Users, ArrowRightLeft, Bot } from "lucide-react";

export default function AIMultiAgent() {
    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 gap-2 mb-8">
                <Users className="h-4 w-4 text-zinc-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Multi-Agent Orchestration</h3>
            </div>

            <div className="flex flex-col md:flex-row items-center justify-between gap-8 relative">
                {/* Connection Line */}
                <div className="hidden md:block absolute top-1/2 left-1/4 right-1/4 h-[1px] bg-gradient-to-r from-violet-500 via-zinc-200 to-blue-500 -translate-y-1/2 z-0" />

                <div className="w-full md:w-1/3 p-4 rounded-xl border border-violet-200 dark:border-violet-900/50 bg-violet-50/50 dark:bg-violet-950/20 z-10">
                    <div className="h-8 w-8 rounded-lg bg-violet-600 flex items-center justify-center mb-3">
                        <Bot className="h-4 w-4 text-white" />
                    </div>
                    <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">Researcher</p>
                    <p className="text-[10px] text-zinc-500 mt-1">Gathers and verifies data points</p>
                </div>

                <div className="flex flex-col items-center z-10">
                    <div className="p-2 rounded-full bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 shadow-sm">
                        <ArrowRightLeft className="h-4 w-4 text-zinc-400" />
                    </div>
                    <span className="text-[9px] font-black text-zinc-400 uppercase tracking-tighter mt-2">Handoff</span>
                </div>

                <div className="w-full md:w-1/3 p-4 rounded-xl border border-blue-200 dark:border-blue-900/50 bg-blue-50/50 dark:bg-blue-950/20 z-10">
                    <div className="h-8 w-8 rounded-lg bg-blue-600 flex items-center justify-center mb-3">
                        <Bot className="h-4 w-4 text-white" />
                    </div>
                    <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">Writer</p>
                    <p className="text-[10px] text-zinc-500 mt-1">Synthesizes data into a report</p>
                </div>
            </div>

            <div className="mt-8 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-900 border border-dashed border-zinc-200 dark:border-zinc-700">
                <p className="text-[10px] text-center font-bold text-zinc-500">Current Task: Quarterly SEO Analysis & Strategy</p>
            </div>
        </div>
    );
}