import { Icon } from "./Icon/Icon.js";
import styled from "@emotion/styled";
import { useTheme } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/Loading.tsx
const loadingKinds = ["primary", "secondary"];
function Loading({ center = true, size = 60, ml = 0, mt = 0, kind = "primary", color = void 0 }) {
	return /* @__PURE__ */ jsx(LoadingWrapper, {
		center,
		ml,
		mt,
		children: /* @__PURE__ */ jsx(Rotate, { children: /* @__PURE__ */ jsx(Icon, {
			name: resolveLoadingProp(null, kind, "defaultIconName", useTheme()),
			width: size,
			color
		}) })
	});
}
const LoadingWrapper = styled.div`
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-left: ${({ ml }) => ml}px;
  margin-top: ${({ mt }) => mt}px;

  ${({ center }) => center && `
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
  `}
`;
const Rotate = styled.div`
  display: inline-flex;
  animation: rotate 0.5s linear infinite;

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;
function resolveLoadingProp(prop, kind, defaultKey, theme) {
	return prop || theme.loading.kinds[kind]?.[defaultKey] || theme.loading[defaultKey];
}
//#endregion
export { Loading, LoadingWrapper, loadingKinds };
