import { Card, Flex, Typography } from "antd";
import InfoCircleIcon from "../icons/InfoCircleIcon";
import PropTypes from "prop-types";

const { Text } = Typography;

const MissingPlaceholder = ({ message }) => {
  return (
    <Card size="small">
      <Flex
        justify="center"
        gap={"small"}
        style={{ height: "100%" }}
        align="center"
      >
        <Text type="secondary">
          <InfoCircleIcon />
        </Text>
        <Text type="secondary">{message}</Text>
      </Flex>
    </Card>
  );
};

MissingPlaceholder.propTypes = {
  message: PropTypes.string.isRequired,
};

export default MissingPlaceholder;