1"use client";
2import type React from "react";
3import { useState, useEffect, useRef } from "react";
4import { motion } from "framer-motion";
5import { cn } from "@/lib/utils";
6
7export interface AnimatedGradientBgProps {
8  children?: React.ReactNode;
9  className?: string;
10  colors?: string[];
11  speed?: number;
12  blur?: number;
13  pattern?: "radial" | "linear" | "conic" | "mesh" | "noise" | "waves";
14  patternIntensity?: number;
15  interactive?: boolean;
16  interactiveIntensity?: number;
17  opacity?: number;
18  size?: "sm" | "md" | "lg" | "full" | number;
19  position?: "fixed" | "absolute" | "relative";
20  zIndex?: number;
21  animate?: boolean;
22  as?: React.ElementType;
23  onClick?: () => void;
24}
25
26export function AnimatedGradientBg({
27  children,
28  className,
29  colors = ["#4f46e5", "#ec4899", "#8b5cf6", "#06b6d4"],
30  speed = 1,
31  blur = 60,
32  pattern = "radial",
33  patternIntensity = 1,
34  interactive = false,
35  opacity = 0.8,
36  size = "full",
37  position = "absolute",
38  zIndex = -1,
39  animate = true,
40  as = "div",
41  onClick,
42}: AnimatedGradientBgProps) {
43  const containerRef = useRef<HTMLDivElement>(null);
44  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
45  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
46  const [isHovered, setIsHovered] = useState(false);
47  useEffect(() => {
48    const updateDimensions = () => {
49      if (containerRef.current) {
50        const { width, height } = containerRef.current.getBoundingClientRect();
51        setDimensions({ width, height });
52      }
53    };
54    updateDimensions();
55    window.addEventListener("resize", updateDimensions);
56    return () => {
57      window.removeEventListener("resize", updateDimensions);
58    };
59  }, []);
60  const handleMouseMove = (e: React.MouseEvent) => {
61    if (!interactive) return;
62    const rect = containerRef.current?.getBoundingClientRect();
63    if (rect) {
64      setMousePosition({
65        x: (e.clientX - rect.left) / rect.width,
66        y: (e.clientY - rect.top) / rect.height,
67      });
68    }
69  };
70  const getSizeStyles = () => {
71    if (typeof size === "number") {
72      return { width: `${size}px`, height: `${size}px` };
73    }
74    switch (size) {
75      case "sm":
76        return { width: "300px", height: "300px" };
77      case "md":
78        return { width: "500px", height: "500px" };
79      case "lg":
80        return { width: "800px", height: "800px" };
81      case "full":
82      default:
83        return { width: "100%", height: "100%" };
84    }
85  };
86
87  const getGradientPattern = () => {
88    const baseColors = colors.join(", ");
89    const adjustedColors =
90      interactive && isHovered ? colors.join(", ") : baseColors;
91    const focalPoint =
92      dimensions.width && dimensions.height
93        ? `${dimensions.width / 2}px ${dimensions.height / 2}px`
94        : "center";
95    switch (pattern) {
96      case "radial":
97        return `radial-gradient(circle at ${
98          interactive && isHovered
99            ? `${mousePosition.x * 100}% ${mousePosition.y * 100}%`
100            : focalPoint
101        }, ${adjustedColors})`;
102      case "linear":
103        return `linear-gradient(${
104          interactive && isHovered ? `${mousePosition.x * 360}deg` : "45deg"
105        }, ${adjustedColors})`;
106      case "conic":
107        return `conic-gradient(from ${
108          interactive && isHovered ? `${mousePosition.x * 360}deg` : "0deg"
109        } at ${
110          interactive && isHovered
111            ? `${mousePosition.x * 100}% ${mousePosition.y * 100}%`
112            : "center"
113        }, ${adjustedColors})`;
114      case "mesh":
115        return `
116          radial-gradient(at 40% 20%, ${colors[0]} 0px, transparent ${
117          100 * patternIntensity
118        }px),
119          radial-gradient(at 80% 0%, ${colors[1]} 0px, transparent ${
120          150 * patternIntensity
121        }px),
122          radial-gradient(at 0% 50%, ${colors[2]} 0px, transparent ${
123          100 * patternIntensity
124        }px),
125          radial-gradient(at 80% 50%, ${colors[3]} 0px, transparent ${
126          150 * patternIntensity
127        }px),
128          radial-gradient(at 0% 100%, ${colors[0]} 0px, transparent ${
129          120 * patternIntensity
130        }px),
131          radial-gradient(at 80% 100%, ${colors[1]} 0px, transparent ${
132          120 * patternIntensity
133        }px),
134          radial-gradient(at 0% 0%, ${colors[2]} 0px, transparent ${
135          100 * patternIntensity
136        }px)
137        `;
138      case "noise":
139        return `linear-gradient(45deg, ${adjustedColors})`;
140      case "waves":
141        return `
142          linear-gradient(${
143            interactive && isHovered ? `${mousePosition.x * 360}deg` : "45deg"
144          }, ${colors[0]} 0%, transparent 40%),
145          linear-gradient(${
146            interactive && isHovered
147              ? `${mousePosition.x * 360 + 60}deg`
148              : "135deg"
149          }, ${colors[1]} 10%, transparent 50%),
150          linear-gradient(${
151            interactive && isHovered
152              ? `${mousePosition.x * 360 + 120}deg`
153              : "225deg"
154          }, ${colors[2]} 20%, transparent 60%),
155          linear-gradient(${
156            interactive && isHovered
157              ? `${mousePosition.x * 360 + 180}deg`
158              : "315deg"
159          }, ${colors[3]} 30%, transparent 70%)
160        `;
161      default:
162        return `radial-gradient(circle at ${focalPoint}, ${adjustedColors})`;
163    }
164  };
165  const variants = {
166    animate: {
167      backgroundPosition: ["0% 0%", "100% 100%"],
168      transition: {
169        duration: 10 / speed,
170        ease: "linear",
171        repeat: Number.POSITIVE_INFINITY,
172        repeatType: "reverse" as const,
173      },
174    },
175    static: {
176      backgroundPosition: "0% 0%",
177    },
178  };
179  const Component = (motion[as as keyof typeof motion] ||
180    motion.div) as React.ElementType;
181  return (
182    <Component
183      ref={containerRef}
184      className={cn("animated-gradient-bg overflow-hidden", className)}
185      onClick={onClick}
186      style={{
187        ...getSizeStyles(),
188        position,
189        zIndex,
190        opacity,
191        backgroundImage: getGradientPattern(),
192        backgroundSize: "200% 200%",
193        filter: `blur(${blur}px)`,
194      }}
195      variants={variants}
196      animate={animate ? "animate" : "static"}
197      onMouseMove={handleMouseMove}
198      onMouseEnter={() => setIsHovered(true)}
199      onMouseLeave={() => setIsHovered(false)}
200    >
201      {pattern === "noise" && (
202        <div
203          className="absolute inset-0 opacity-20 mix-blend-overlay"
204          style={{
205            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
206            backgroundSize: `${100 * patternIntensity}px ${
207              100 * patternIntensity
208            }px`,
209          }}
210        />
211      )}
212      {children}
213    </Component>
214  );
215}
216