"use client";

import type { CSSProperties } from "react";
import { useEffect } from "react";

type PageBackgroundProps = {
  image?: string;
  disabled?: boolean;
};

export function PageBackground({
  image,
  disabled = false,
}: PageBackgroundProps) {
  useEffect(() => {
    if (!image) return;
    document.documentElement.style.setProperty(
      "--page-background-image",
      `url("${image}")`,
    );
    return () => {
      document.documentElement.style.removeProperty("--page-background-image");
    };
  }, [image]);

  return (
    <span
      aria-hidden="true"
      className={
        disabled
          ? "page-background-none"
          : image
            ? "page-background-custom"
            : "page-background-default"
      }
      style={
        image
          ? ({ "--page-background-image": `url("${image}")` } as CSSProperties)
          : undefined
      }
    />
  );
}