Animated Beams

import { Component as AnimatedBeams } from "@/components/ui/animated-beams";
import { useRef } from "react";
import {
  User,
  Bot,
  Database,
  Globe,
  CreditCard,
  Mail,
  Bell,
  Shield,
} from "lucide-react";

function Node({
  nodeRef,
  icon,
  label,
  className,
}: {
  nodeRef: React.RefObject<HTMLDivElement | null>;
  icon: React.ReactNode;
  label: string;
  className?: string;
}) {
  return (
    <div
      ref={nodeRef}
      className={`relative z-10 flex flex-col items-center gap-2 ${className ?? ""}`}
    >
      <div className="flex size-14 items-center justify-center rounded-xl border border-border bg-card shadow-sm">
        {icon}
      </div>
      <span className="text-[11px] font-medium text-muted-foreground">
        {label}
      </span>
    </div>
  );
}

export default function Demo() {
  const userRef = useRef<HTMLDivElement>(null);
  const apiRef = useRef<HTMLDivElement>(null);
  const botRef = useRef<HTMLDivElement>(null);
  const hubRef = useRef<HTMLDivElement>(null);
  const dbRef = useRef<HTMLDivElement>(null);
  const mailRef = useRef<HTMLDivElement>(null);
  const payRef = useRef<HTMLDivElement>(null);
  const notifRef = useRef<HTMLDivElement>(null);

  const beams = [
    { from: userRef, to: hubRef, curvature: -0.1, glowColor: "#8B5CF6", duration: 3, delay: 0 },
    { from: apiRef, to: hubRef, curvature: 0, glowColor: "#8B5CF6", duration: 3, delay: 0.5 },
    { from: botRef, to: hubRef, curvature: 0.1, glowColor: "#8B5CF6", duration: 3, delay: 1 },
    { from: hubRef, to: dbRef, curvature: -0.1, glowColor: "#3B82F6", duration: 2.5, delay: 1.5 },
    { from: hubRef, to: mailRef, curvature: 0, glowColor: "#3B82F6", duration: 2.5, delay: 2 },
    { from: hubRef, to: payRef, curvature: 0, glowColor: "#3B82F6", duration: 2.5, delay: 2.5 },
    { from: hubRef, to: notifRef, curvature: 0.1, glowColor: "#3B82F6", duration: 2.5, delay: 3 },
  ];

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-8">
      <div className="w-full max-w-3xl">
        <div className="text-center mb-16">
          <h2 className="text-2xl font-bold tracking-tight text-foreground mb-2">
            Animated Beams
          </h2>
          <p className="text-sm text-muted-foreground max-w-md mx-auto">
            Glowing particles travel along auto-calculated paths between any DOM elements. Perfect for architecture diagrams, flow charts, and &ldquo;how it works&rdquo; sections.
          </p>
        </div>

        <AnimatedBeams beams={beams} className="w-full">
          <div className="flex items-center justify-between gap-8">
            {/* Left column — sources */}
            <div className="flex flex-col items-center gap-10">
              <Node nodeRef={userRef} icon={<User className="size-6 text-foreground" />} label="Users" />
              <Node nodeRef={apiRef} icon={<Globe className="size-6 text-foreground" />} label="API" />
              <Node nodeRef={botRef} icon={<Bot className="size-6 text-foreground" />} label="AI Agent" />
            </div>

            {/* Center — hub */}
            <div className="flex items-center justify-center">
              <div
                ref={hubRef}
                className="relative z-10 flex size-20 items-center justify-center rounded-2xl border-2 border-border bg-card shadow-lg"
              >
                <Shield className="size-8 text-foreground" />
              </div>
            </div>

            {/* Right column — outputs */}
            <div className="flex flex-col items-center gap-8">
              <Node nodeRef={dbRef} icon={<Database className="size-6 text-foreground" />} label="Database" />
              <Node nodeRef={mailRef} icon={<Mail className="size-6 text-foreground" />} label="Email" />
              <Node nodeRef={payRef} icon={<CreditCard className="size-6 text-foreground" />} label="Payments" />
              <Node nodeRef={notifRef} icon={<Bell className="size-6 text-foreground" />} label="Alerts" />
            </div>
          </div>
        </AnimatedBeams>
      </div>
    </div>
  );
}