import React from "react";
import { Row, Col } from "antd/lib/grid";
import { Icon } from "components/Icon";
import { Paragraph, Text } from "components/Typography";
import Button from "antd/lib/button";
import { useWindowSize } from "../../../hooks";
import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";

interface EmptyModuleProps {
  titleAction: JSX.Element | string;
  caption?: JSX.Element | string;
  onClick?: () => void;
}

const EmptyModule: React.FC<EmptyModuleProps> = ({
  titleAction,
  caption = "Nothing Here Yet",
  onClick,
}) => {
  const { width } = useWindowSize();
  const isMobileStyleChangesEnabled = width && width <= 768;
  return (
    <React.Fragment>
      <Row
        data-testid="module--empty"
        gutter={[10, 10]}
        className={isMobileStyleChangesEnabled ? "p__t--12" : "p__t--24"}
      >
        <Col span={24} className="text__align--center">
          <Icon name="empty-module" />
        </Col>
        <Col span={24} className="text__align--center">
          <Text
            data-testid="empty-module--caption"
            preset="semibold18"
            className="d--block m__b--4"
          >
            {caption}
          </Text>
          <Paragraph
            data-testid="empty-module--caption-cta"
            className="opacity--60 leading-22"
          >
            Click the button below to get started
          </Paragraph>
        </Col>
        <Col span={24} className="text__align--center">
          <Button type="link" onClick={onClick}>
            <div className="d--flex justify__content--center align__items--center">
              <Icon name="add-blue" />
              <Text preset="semibold18" className="text--blue m__l--4">
                {titleAction}
              </Text>
            </div>
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
};

export default EmptyModule;
