"use client";
import { cn } from "../shared/utils";
import React, { ReactNode } from "react";

interface MovingBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  children: ReactNode;
  className?: string;
  showAllAnimations?: boolean;
}

export const MovingBackground = ({
  className,
  children,
  showAllAnimations = false,
  ...props
}: MovingBackgroundProps) => {
  return (
    <div
      className={cn(
        "relative min-h-screen w-full overflow-hidden bg-background",
        className
      )}
      {...props}
    >
      {/* Moving background elements with new animations */}
      <div className="absolute inset-0">
        {/* First animation: moveVertical */}
        <div className="absolute left-1/4 top-1/4 h-32 w-32 rounded-full bg-primary/20 blur-xl animate-first" />
        
        {/* Second animation: moveInCircle reverse */}
        <div className="absolute right-1/4 top-1/3 h-24 w-24 rounded-full bg-secondary/20 blur-lg animate-second" />
        
        {/* Third animation: moveInCircle linear */}
        <div className="absolute left-1/3 bottom-1/4 h-40 w-40 rounded-full bg-accent/20 blur-2xl animate-third" />
        
        {/* Fourth animation: moveHorizontal */}
        <div className="absolute right-1/3 bottom-1/3 h-28 w-28 rounded-full bg-muted/20 blur-lg animate-fourth" />
        
        {/* Fifth animation: moveInCircle ease */}
        <div className="absolute left-1/2 top-1/2 h-20 w-20 rounded-full bg-destructive/20 blur-md animate-fifth" />
      </div>

      {/* Additional animated elements when showAllAnimations is true */}
      {showAllAnimations && (
        <>
          {/* Extra floating elements */}
          <div className="absolute left-1/6 top-1/6 h-16 w-16 rounded-full bg-sidebar-accent/30 blur-md animate-first" />
          <div className="absolute right-1/6 bottom-1/6 h-20 w-20 rounded-full bg-sidebar-muted/30 blur-lg animate-second" />
          <div className="absolute left-1/2 top-1/6 h-12 w-12 rounded-full bg-sidebar-border/30 blur-sm animate-third" />
          <div className="absolute right-1/2 bottom-1/6 h-36 w-36 rounded-full bg-ring/20 blur-xl animate-fourth" />
        </>
      )}

      {/* Content overlay */}
      <div className="relative z-10 flex min-h-screen items-center justify-center">
        {children}
      </div>

      {/* Gradient overlay for better text readability */}
      <div className="absolute inset-0 bg-gradient-to-br from-background/80 via-background/40 to-background/80 pointer-events-none" />
    </div>
  );
};