import PropTypes from 'prop-types';
import { Box } from '@mui/material';
import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
import { styled } from '../Theme';

const Wrapper = styled(Box)`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  min-height: 100px;
  color: #999;
  .empty-icon {
    margin: 10px 0;
  }
`;

/**
 * Empty component to display empty state
 * @typedef {{
 *   color?: string;
 *   size?: number;
 *   children?: import('react').ReactNode;
 * } & import('react').ComponentPropsWithoutRef<"div"> } EmptyProps
 */

/**
 * Empty state component
 * @param {EmptyProps} props
 * @returns {JSX.Element}
 */
function Empty({ color = 'inherit', size = 36, children = null, ...rest }) {
  return (
    <Wrapper {...rest}>
      <EmptyIcon style={{ width: size, height: size, color }} className="empty-icon" />
      <Box className="empty-content">{children}</Box>
    </Wrapper>
  );
}

Empty.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  children: PropTypes.any,
};

export default Empty;
