import { cn } from "@/lib/cn";

interface NoisyBackgroundProps {
  className?: string;
  disableAnimation?: boolean;
}

const NoisyBackground: React.FC<NoisyBackgroundProps> = ({ className, disableAnimation }) => {
  return (
    <div
      className={cn(
        "pointer-events-none fixed inset-[0%] flex items-center justify-center z-[9999] overflow-hidden",
        className
      )}
    >
      <div
        style={{
          backgroundImage: "url('/assets/noisy-background/noisy_texture.webp')",
          flex: "none",
          width: "300%",
          maxWidth: "none",
          height: "300%",
          position: "absolute",
          backgroundSize: "256px",
          animation: disableAnimation ? "none" : "noise 1s steps(1) infinite",
        }}
      ></div>
    </div>
  );
};

export default NoisyBackground;

@keyframes noise {
  0%, 100% {
      background-position: 0 0;
  }
  10% {
      background-position: -5% -10%;
  }
  20% {
      background-position: -15% 5%;
  }
  30% {
      background-position: 7% -25%;
  }
  40% {
      background-position: 20% 25%;
  }
  50% {
      background-position: -25% 10%;
  }
  60% {
      background-position: 15% 5%;
  }
  70% {
      background-position: 0% 15%;
  }
  80% {
      background-position: 25% 35%;
  }
  90% {
      background-position: -10% 10%;
  }
}