import React from "react";
import PropTypes from "prop-types";
import PropTypesCss from "prop-types-css";
import styling from "@devcake/styling";

styling.setDefault("components.overlay.color", "rgba(0, 0, 0, 0.7)");
styling.setDefault("components.overlay.classes", "");

export interface OverlayProps {
  children?: React.ReactNode
  color?: string;
  className?: string;
}

export const Overlay: React.FunctionComponent<OverlayProps> = ({ children, color, className }) => {
  let backgroundColor = color ?? styling.get("components.overlay.color");

  return (
    <div
      className={[
        "absolute top-0 left-0 bottom-0 right-0",
        className,
        styling.get("components.overlay.classes")
      ].join(" ")}
      style={{ backgroundColor }}
    >
      {children}
    </div>
  );
};

Overlay.propTypes = {
  children: PropTypes.node,
  color: PropTypesCss.color,
  className: PropTypes.string
};