"use client";

import type { CSSProperties } from "react";
import { MAIN_WHITE_PATTERN_SRC } from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

type Props = {
  introPhase: "intro" | "settled" | "static";
  className?: string;
  hoverActive?: boolean;
  hoverX?: number;
  hoverY?: number;
};

export function HeroTopographyBackground({
  introPhase,
  className,
  hoverActive = false,
  hoverX = 50,
  hoverY = 50,
}: Props) {
  return (
    <div
      className={cn(
        "rift-hero-topo group/topo-section absolute inset-0 isolate overflow-hidden bg-white",
        introPhase === "intro" && "rift-hero-intro",
        introPhase === "settled" && "rift-hero-settled",
        introPhase === "static" && "rift-hero-static",
        hoverActive && "rift-hero-topo--hover",
        className
      )}
      style={
        {
          "--topo-hover-x": `${hoverX}%`,
          "--topo-hover-y": `${hoverY}%`,
        } as CSSProperties
      }
      aria-hidden
    >
      <div className="topo-hero-pattern-site absolute inset-0">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={MAIN_WHITE_PATTERN_SRC}
          alt=""
          className="topo-pattern-asset topo-hero-pattern-img block h-full w-full object-cover"
          draggable={false}
        />
      </div>

      <div className="topo-hero-pattern-water absolute inset-0" aria-hidden>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={MAIN_WHITE_PATTERN_SRC}
          alt=""
          className="topo-hero-water-flow-img block h-full w-full object-cover"
          draggable={false}
        />
      </div>

      <div className="topo-hero-channel-glow absolute inset-0" aria-hidden />
      <div className="topo-hero-water-shimmer absolute inset-0" aria-hidden />
      <div className="topo-hero-water-spotlight absolute inset-0" aria-hidden />
    </div>
  );
}