"use client";
import { Spinner, Container } from "react-bootstrap";

interface PROPS {
  height?: string;
  width?: string;
  top?: string;
}

export function SuspenseLoader() {
  return (
    <div
      className="loading-overlay  d-flex justify-content-center align-items-center"
      style={{ height: "80vh" }}
    >
      <Container className="text-center">
        {/* <span className="loader-text">Loading...</span>
        <Image src="/assets/logo.svg" alt="logo" style={{ width: "100px" }} /> */}
        <Spinner animation="border" variant="dark" />
      </Container>
    </div>
  );
}

export function CustomLoader(props: PROPS) {
  return (
    <div
      className="custom-loader d-flex justify-content-center align-items-center h-100 w-100"
      style={{ marginTop: "50px", width: "100px", textAlign: "center" }}
    >
      <Spinner
        animation="grow"
        variant="primary"
        style={{ height: props.height, width: props.width }}
      />
    </div>
  );
}