yx-react-template/src/components/common/BackgroundContainer/BackgroundContainer.tsx

import { cn } from "@/lib/cn";
import { getStaticImage } from "@/utils/assets";
import styles from "./BackgroundContainer.module.css";
import type { BackgroundContainerProps } from "./BackgroundContainer.types";

const DIRECT_URL_PATTERN = /^(?:[a-z][a-z\d+.-]*:|\/|\.\.?\/)/i;

function resolveBackgroundImage(src: string): string {
	return DIRECT_URL_PATTERN.test(src) ? src : getStaticImage(src) || src;
}

export function BackgroundContainer({
	src,
	fit = "cover",
	position = "center",
	repeat = "no-repeat",
	as: Component = "div",
	className,
	contentClassName,
	children,
	style,
	...props
}: BackgroundContainerProps) {
	const imageSrc = resolveBackgroundImage(src);

	return (
		<Component
			className={cn(styles.container, className)}
			style={{
				backgroundImage: `url(${JSON.stringify(imageSrc)})`,
				backgroundSize: fit,
				backgroundPosition: position,
				backgroundRepeat: repeat,
				...style,
			}}
			{...props}
		>
			<div className={cn(styles.content, contentClassName)}>{children}</div>
		</Component>
	);
}