import React from "react";

const Loading = () => {
  return (
    <div className="uikit-flex uikit-items-center uikit-justify-center">
      <div className="uikit-animate-spin uikit-rounded-full uikit-h-4 uikit-w-4 uikit-border-[2px] uikit-border-t-transparent uikit-border-white"></div>
    </div>
  );
};

export default Loading;

Loading.AbsoluteCenter = (() => {
  const AbsoluteCenter = ({ children }: { children?: React.ReactNode }) => {
    return (
      <div className="uikit-absolute uikit-top-1/2 uikit-left-1/2 uikit-transform uikit--translate-x-1/2 uikit--translate-y-1/2">
        {children}
      </div>
    );
  };
  AbsoluteCenter.displayName = "LoadingAbsoluteCenter";
  return AbsoluteCenter;
})();