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

type Props = {
  className?: string;
};

/** White topography pattern anchored to the bottom of the green footer only. */
export function FooterTopoPattern({ className }: Props) {
  return (
    <div
      className={cn(
        "topo-footer-pattern pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[min(42vh,320px)] overflow-hidden",
        className
      )}
      aria-hidden
    >
      <div
        className="absolute inset-x-0 bottom-0 h-full"
        style={{
          maskImage:
            "linear-gradient(to top, black 0%, black 38%, rgba(0,0,0,0.55) 62%, transparent 100%)",
          WebkitMaskImage:
            "linear-gradient(to top, black 0%, black 38%, rgba(0,0,0,0.55) 62%, transparent 100%)",
        }}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={MAIN_WHITE_PATTERN_SRC}
          alt=""
          className="topo-footer-pattern-asset block h-full w-full object-cover object-bottom"
          draggable={false}
        />
      </div>
      <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-[#1a5c38] to-transparent" />
    </div>
  );
}