"use client";

import { cn } from "@/lib/utils";

type AgentWorkflowParticleScatterProps = {
  className?: string;
  particleSize?: number;
  particleCount?: number;
};

export function AgentWorkflowParticleScatter({
  className,
  particleSize,
  particleCount,
}: AgentWorkflowParticleScatterProps) {
  const searchParams = new URLSearchParams();
  if (typeof particleSize === "number" && Number.isFinite(particleSize) && particleSize > 0) {
    searchParams.set("particleSize", String(particleSize));
  }
  if (typeof particleCount === "number" && Number.isFinite(particleCount) && particleCount > 0) {
    searchParams.set("particleCount", String(Math.round(particleCount)));
  }
  const src = searchParams.size
    ? `/particle-scatter-effect.html?${searchParams.toString()}`
    : "/particle-scatter-effect.html";

  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
        className
      )}
    >
      <iframe
        aria-hidden="true"
        className="h-full w-full border-0 bg-transparent"
        loading="eager"
        src={src}
        tabIndex={-1}
        title="Particle Scatter Background"
      />
    </div>
  );
}