import { cls } from "@/lib/utils";

type LightRaysCenterBackgroundProps = {
  position: "fixed" | "absolute";
};

const LightRaysCenterBackground = ({ position }: LightRaysCenterBackgroundProps) => {
  return (
    <div className={cls(position, "inset-0 -z-10 overflow-hidden pointer-events-none select-none")} aria-hidden="true">
      <div className="absolute inset-0 bg-background mask-[radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)] bg-[linear-gradient(to_right,color-mix(in_srgb,var(--color-background-accent)_20%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--color-background-accent)_10%,transparent)_1px,transparent_1px)] bg-size-[10vw_10vw]" />

      <div className="absolute -top-[400px] left-1/2 -translate-x-1/2 w-[1142px] h-[129vh] overflow-hidden blur-lg mask-[radial-gradient(50%_109%,#000_0%,#000000f6_0%,transparent_96%)]">
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 1, transform: "rotate(-20deg)", animation: "ray-pulse 4s ease-in-out 0s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.6, transform: "rotate(-12deg)", animation: "ray-pulse 3.5s ease-in-out 0.5s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-10px)] w-[20px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.45, transform: "scale(0.9) rotate(-5deg)", animation: "ray-pulse 5s ease-in-out 1.2s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-7.5px)] w-[15px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.625, transform: "rotate(-3deg)", animation: "ray-pulse 3s ease-in-out 0.3s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-20px)] w-[40px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.1, transform: "scale(0.79) rotate(0deg)", animation: "ray-pulse 4.5s ease-in-out 0.8s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-10px)] w-[20px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.525, transform: "rotate(3deg)", animation: "ray-pulse 3.2s ease-in-out 1.5s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-7.5px)] w-[15px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.725, transform: "scale(0.9) rotate(5deg)", animation: "ray-pulse 4.2s ease-in-out 0.2s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 0.6, transform: "rotate(12deg)", animation: "ray-pulse 3.8s ease-in-out 1s infinite both" } as React.CSSProperties}
        />
        <div
          className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
          style={{ "--ray-opacity": 1, transform: "rotate(20deg)", animation: "ray-pulse 4s ease-in-out 0.7s infinite both" } as React.CSSProperties}
        />

        <div className="absolute left-[calc(50%-599px)] -top-[352px] -bottom-[46px] w-[1198px] opacity-[0.025] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
        <div className="absolute left-[calc(50%-432.5px)] -top-[252px] w-[865px] h-[929px] opacity-10 overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
        <div className="absolute left-[calc(50%-432.5px)] -top-[252px] w-[865px] h-[929px] opacity-10 overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
      </div>
    </div>
  );
};

export default LightRaysCenterBackground;
