/** @jsx jsx */
import { css, jsx } from "@emotion/core";

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

const InfoCardMolecule = (props: any) => (
  <div
    className={`${props.className} w-100 flex flex-column align-center justify-center`}
    css={[css`height: 90vh;`, props.css]}
  >
    <LoaderMolecule className="self-center mb4" />
    <TextAtom size="L" className="fw6 self-center">{props.message}</TextAtom>
    <TextAtom size="M" className="self-center">{props.sub}</TextAtom>
  </div>
);

export { InfoCardMolecule };