import React from "react";
import LoadingBar from "../LoadingBar";

interface Props {
  isLoading?: boolean;
  hasContent?: boolean;
  emptyState?: React.ReactElement;
  children?: React.ReactNode;
  className?: string;
}

export default function AsyncContainer({
  isLoading,
  hasContent,
  emptyState,
  children,
  className
}: Props) {
  const Wrapper = ({ children: wrapperChild }) => (
    <div className={className}>{wrapperChild}</div>
  );

  if (isLoading) {
    return (
      <Wrapper>
        <LoadingBar />
      </Wrapper>
    );
  }

  if (hasContent) {
    return <Wrapper>{children}</Wrapper>;
  }

  return <Wrapper>{emptyState}</Wrapper>;
}