import cx from "classnames";
import type { ReactNode } from "react";
import React from "react";
import { Container } from "../Container";
import { Loader } from "./Loader";

const CLASS_ROOT = "loader-fullscreen";

interface LoaderFullscreenProps {
  className?: string;
  children?: ReactNode;
}

const LoaderFullscreen: React.FC<LoaderFullscreenProps> = ({
  className,
  children,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  return (
    <div className={classes} role="status" aria-live="polite" {...other}>
      <Container>
        {children}
        <Loader size="large" />
      </Container>
    </div>
  );
};

LoaderFullscreen.displayName = "LoaderFullscreen";

export { LoaderFullscreen };