'use client';

import { memo } from 'react';
import { cls } from '@/lib/utils';

interface GlowingOrbBackgroundProps {
  className?: string;
  blurAmount?: string;
  glowColor?: string;
  backgroundColor?: string;
}

const GlowingOrbBackground = ({
  className = "",
  blurAmount = "57px",
  glowColor = "var(--color-primary-cta)",
  backgroundColor = "var(--background)",
}: GlowingOrbBackgroundProps) => {
  return (
    <div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_100%)]" aria-hidden="true">
      <div
        className={cls("absolute left-1/2 -translate-x-1/2 w-full h-[100vh] -bottom-[9vh] overflow-hidden z-0", className)}
      >
        <div
          className="absolute left-1/2 -translate-x-1/2 w-[49vw] h-[12vh] bottom-[25vh] overflow-hidden"
          style={{
            background: `radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, ${glowColor} 25%, transparent), transparent)`,
            filter: `blur(${blurAmount})`,
            WebkitFilter: `blur(${blurAmount})`,
          }}
        />
        <div
          className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[100%]"
          style={{
            background: `linear-gradient(180deg, color-mix(in srgb, ${glowColor} 30%, transparent), transparent)`,
          }}
        />
        <div
          className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[100%]"
          style={{
            backgroundColor,
            boxShadow: `inset 0 2px 20px color-mix(in srgb, ${glowColor} 30%, transparent), 0 -10px 50px 1px color-mix(in srgb, ${glowColor} 25%, transparent)`,
          }}
        />
      </div>
    </div>
  );
};

GlowingOrbBackground.displayName = 'GlowingOrbBackground';

export default memo(GlowingOrbBackground);