/** @jsx jsx */
import { css, jsx } from "@emotion/core";
// import { css, cx } from "emotion";
import * as React from "react";

import { TextAtom } from "../../atoms";
import { LoaderMolecule } from "../../molecules";

interface IProps {
    message?: string;
    sub?: string;
    className?: string;
    css?: string;
}

class LoadingPagelets extends React.PureComponent<IProps, any> {
  public render() {
    const {
      message = "",
      sub = "",
      className = "",      
    } = this.props;
    return (
      <div
        // className={cx("w-100 flex flex-column align-center justify-center", css`height: 90vh`)}
        className={`${className} w-100 flex flex-column align-center justify-center`}
        css={[css`height: 90vh`, this.props.css]}
      >
        <LoaderMolecule className="self-center mb4" />
        <TextAtom size="L" className="fw6 self-center">{message}</TextAtom>
        <TextAtom size="M" className="self-center">{sub}</TextAtom>
      </div>
    );
  }
}

export { LoadingPagelets };