import { jsx } from 'react/jsx-runtime';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';

const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
/**
 * Each blob follows a unique organic path using keyframed x/y translations
 * and scale changes. The durations are intentionally varied so the blobs
 * never synchronize, producing a natural morphing look.
 */
const blobAnimations = [
    {
        // Blob 0 -- slow horizontal drift with vertical bob
        x: ['0%', '30%', '-20%', '10%', '0%'],
        y: ['0%', '-25%', '15%', '-10%', '0%'],
        scale: [1, 1.15, 0.9, 1.05, 1],
        baseDuration: 20,
    },
    {
        // Blob 1 -- figure-8-ish path, slightly faster
        x: ['0%', '-35%', '25%', '-15%', '0%'],
        y: ['0%', '20%', '-30%', '25%', '0%'],
        scale: [1, 0.9, 1.2, 0.95, 1],
        baseDuration: 23,
    },
    {
        // Blob 2 -- wide circular sweep
        x: ['0%', '25%', '0%', '-25%', '0%'],
        y: ['0%', '-20%', '25%', '-15%', '0%'],
        scale: [1, 1.1, 0.85, 1.15, 1],
        baseDuration: 27,
    },
    {
        // Blob 3 -- gentle diagonal drift
        x: ['0%', '-20%', '30%', '-10%', '0%'],
        y: ['0%', '30%', '-20%', '10%', '0%'],
        scale: [1, 0.95, 1.1, 0.9, 1],
        baseDuration: 31,
    },
];
/**
 * Positions each blob at a different quadrant of the container so they
 * begin spread out. Additional blobs beyond 4 cycle through positions.
 */
const blobPositions = [
    { top: '10%', left: '15%' },
    { top: '5%', right: '10%' },
    { bottom: '10%', left: '20%' },
    { bottom: '5%', right: '15%' },
];
/**
 * Aurora creates an animated multi-color gradient background effect.
 *
 * Renders several large, blurred, semi-transparent blobs that slowly drift
 * and morph, producing an organic aurora-like glow. Ideal for hero sections
 * and decorative backgrounds.
 *
 * The component renders as an absolutely-positioned layer with
 * `pointer-events-none`, so it will not interfere with interactive content.
 * The parent element should have `position: relative` and `overflow: hidden`.
 *
 * @example
 * ```tsx
 * <div className="relative overflow-hidden h-96 bg-gray-950">
 *   <Aurora />
 *   <div className="relative z-10 text-white p-8">
 *     <h1>Hero Content</h1>
 *   </div>
 * </div>
 * ```
 */
const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
    const shouldReduceMotion = useReducedMotion();
    // Compute base blob dimension from the size multiplier.
    // Using percentage-based sizing so it scales with the container.
    const blobDimension = `${40 * size}%`;
    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
            opacity,
            filter: `blur(${blur}px)`,
            ...style,
        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
            const anim = blobAnimations[index % blobAnimations.length];
            const position = blobPositions[index % blobPositions.length];
            const duration = anim.baseDuration / speed;
            // When reduced motion is preferred, render static blobs with no animation.
            if (shouldReduceMotion) {
                return (jsx("div", { style: {
                        position: 'absolute',
                        ...position,
                        width: blobDimension,
                        height: blobDimension,
                        borderRadius: '50%',
                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
                        mixBlendMode: 'screen',
                    } }, index));
            }
            return (jsx(motion.div, { animate: {
                    x: anim.x,
                    y: anim.y,
                    scale: anim.scale,
                }, transition: {
                    duration,
                    repeat: Infinity,
                    repeatType: 'loop',
                    ease: 'easeInOut',
                }, style: {
                    position: 'absolute',
                    ...position,
                    width: blobDimension,
                    height: blobDimension,
                    borderRadius: '50%',
                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
                    mixBlendMode: 'screen',
                    willChange: 'transform',
                } }, index));
        }) }));
};

export { Aurora };
