import {
  getAssetForTone,
  MAIN_WHITE_PATTERN_SRC,
  type TopoPatternId,
  type TopoSectionTone,
  resolveTopoPattern,
} from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

export type TopoTextClearance = "section" | "header" | "none";

type Props = {
  pattern?: TopoPatternId;
  opacity?: number;
  tone?: TopoSectionTone;
  textClearance?: TopoTextClearance;
  className?: string;
};

/** mainwhite.svg on white sections only */
export function TopographicPattern({
  pattern = "topo-main",
  opacity,
  tone = "light",
  className,
}: Props) {
  const id = resolveTopoPattern(pattern);
  if (!id || tone === "green") return null;

  const asset = getAssetForTone("light");
  const layerOpacity = opacity ?? asset.defaultOpacity;

  return (
    <div
      className={cn(
        "topo-pattern-bg topo-tone-light pointer-events-none absolute inset-0 z-0 overflow-hidden",
        className
      )}
      data-topo-tone="light"
      data-pattern-src={MAIN_WHITE_PATTERN_SRC}
      aria-hidden
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={MAIN_WHITE_PATTERN_SRC}
        alt=""
        className="topo-pattern-asset block h-full w-full object-cover"
        style={{
          opacity: layerOpacity,
          objectPosition: asset.positions[0],
        }}
        draggable={false}
      />
    </div>
  );
}