import IconFont from "../iconfont/index.js";
import { getCssNumber } from "../../utils/index.js";
import useCssVariables from "../../hooks/useCssVariables.js";
import React, { useRef } from "react";
import { Spin } from "antd";
import "./index.less";
//#region src/components/pisellLoading/index.tsx
const PisellLoading = (props) => {
	const { children, fullscreen, mask, loading, delay } = props;
	const ref = useRef(null);
	const { backgroundColor = "#fff", width = "100%", height = "100%" } = mask || {};
	useCssVariables({
		variables: {
			"--pisell-loading-mask-opacity": mask ? "1" : "0",
			"--pisell-loading-bg-color": fullscreen && !mask ? "transparent" : backgroundColor,
			"--pisell-loading-bg-width": getCssNumber(width) || "100%",
			"--pisell-loading-bg-height": getCssNumber(height) || "100%",
			"--pisell-loading-bg-border-radius": width !== "100%" || height !== "100%" ? "12px" : "0px"
		},
		ref
	});
	return /* @__PURE__ */ React.createElement("div", {
		ref,
		className: "pisell-loading-wrapper"
	}, /* @__PURE__ */ React.createElement(Spin, {
		fullscreen,
		delay,
		spinning: loading,
		indicator: /* @__PURE__ */ React.createElement(IconFont, {
			type: "pisell2-loader2",
			style: { fontSize: 40 },
			spin: true
		})
	}, children));
};
//#endregion
export { PisellLoading as default };
