'use client';

/**
 * MeshEffect - Mesh gradient blobs that react to audio
 */

import { cn } from '../../../../_shared';
import type { calculateMeshGradients } from '../../../effects';

// =============================================================================
// TYPES
// =============================================================================

interface MeshEffectProps {
  gradients: ReturnType<typeof calculateMeshGradients>;
  blur: string;
  isPlaying: boolean;
}

// =============================================================================
// COMPONENT
// =============================================================================

export function MeshEffect({ gradients, isPlaying }: MeshEffectProps) {
  return (
    <>
      {gradients.map((g, i) => {
        const isCenter = 'isCenter' in g && g.isCenter;
        const scale = 'scale' in g ? g.scale : 1;
        const rotation = 'rotation' in g ? g.rotation : 0;
        const itemBlur = 'blur' in g ? g.blur : 'blur-2xl';

        return (
          <div
            key={i}
            className={cn('absolute rounded-full -z-10', itemBlur)}
            style={{
              width: g.width,
              height: g.height,
              top: 'top' in g ? g.top : undefined,
              bottom: 'bottom' in g ? g.bottom : undefined,
              left: 'left' in g ? g.left : undefined,
              right: 'right' in g ? g.right : undefined,
              background: isCenter
                ? `radial-gradient(circle, hsl(${g.color} / 0.6) 0%, hsl(${g.color} / 0.3) 30%, transparent 60%)`
                : `radial-gradient(circle, hsl(${g.color}) 0%, hsl(${g.color} / 0.5) 30%, transparent 65%)`,
              opacity: isPlaying ? g.opacity : 0,
              transform: isCenter
                ? `translate(-50%, -50%) scale(${scale})`
                : `scale(${scale}) rotate(${rotation}deg)`,
              transition: 'all 0.08s ease-out',
            }}
          />
        );
      })}
    </>
  );
}
