import React from "react";

import { isDesktop, useLayoutType } from "@openmrs/esm-framework";
import styles from "./overlay.scss";

interface OverlayProps {
  close: () => void;
  children?: React.ReactNode;
  header: string;
  buttonsGroup?: React.ReactElement;
}

const Overlay: React.FC<OverlayProps> = ({
  close,
  children,
  header,
  buttonsGroup,
}) => {
  const layout = useLayoutType();

  return (
    <div
      className={
        isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay
      }
    >
      <div className={styles.overlayContent}>{children}</div>
      <div className={styles.buttonsGroup}>{buttonsGroup}</div>
    </div>
  );
};

export default Overlay;