import { Col, Row } from "antd/lib/grid";
import { Icon } from "components/Icon";
import { Paragraph } from "components/Typography";
import React from "react";
import AddModule from "../AddModule/AddModule";
import "./EmptyModules.scss";

interface EmptyModulesProps {
  showMenu?: boolean;
  setShowMenu?: (value: boolean) => void;
}

const EmptyModules = ({ showMenu, setShowMenu }: EmptyModulesProps) => {
  return (
    <React.Fragment>
      <div className="empty-modules">
        <Row justify="center" gutter={[10, 20]}>
          <Col span={24} className="text__align--center">
            <Icon name="empty-module" />
          </Col>
          <Col span={24} className="text__align--center">
            <Paragraph preset="semibold18" className="d--block m__b--4">
              Nothing Here Yet
            </Paragraph>
            <Paragraph className="opacity--60 leading-22">
              Click the button below to get started
            </Paragraph>
          </Col>
          <Col span={24}>
            <Row justify="center">
              <AddModule
                isSolid={false}
                showMenu={showMenu}
                setShowMenu={setShowMenu}
              />
            </Row>
          </Col>
        </Row>
      </div>
    </React.Fragment>
  );
};

export default EmptyModules;
