/**
 * GnBackground - Page background wrapper (gradient / shape × desktop / tablet / mobile).
 */

import { defineComponent, h, computed } from "vue";

export default defineComponent({
	name: "GnBackground",
	props: {
		variant: { type: String, default: "gradient" },
		device: { type: String, default: "desktop" },
		fixed: { type: Boolean, default: false },
		preview: { type: Boolean, default: false }
	},
	setup(props, { slots }) {
		const safeVariant = computed(() =>
			["gradient", "shape"].includes(props.variant) ? props.variant : "gradient"
		);
		const safeDevice = computed(() =>
			["desktop", "tablet", "mobile"].includes(props.device) ? props.device : "desktop"
		);

		const classes = computed(() => {
			const list = ["vmk-bg"];
			if (props.fixed) list.push("is-fixed");
			if (props.preview) list.push("is-preview");
			return list;
		});

		return () =>
			h("div", {
				class: classes.value,
				"data-variant": safeVariant.value,
				"data-device": safeDevice.value
			}, slots.default?.());
	}
});