import { CSSProperties } from "react";
import { backgroundImages } from "../../../config/backgroundConfig";

interface AppBackgroundProps {
  position?: "fixed" | "absolute";
  style?: CSSProperties;
  zIndex?: number;
  imageUrl?: string;
}

export function AppBackground({
  position = "fixed",
  style,
  zIndex = 0,
  imageUrl = backgroundImages.home,
}: AppBackgroundProps) {
  return (
    <div
      className={`inset-0 w-full ${position === "fixed" ? "fixed" : "absolute"}`}
      style={{
        backgroundImage: `url(${imageUrl})`,
        backgroundSize: "100% auto",
        backgroundPosition: "top center",
        backgroundRepeat: "no-repeat",
        backgroundColor: "#23183E",
        zIndex,
        ...style,
      }}
    />
  );
}
