import React from 'react';
import { Flex, Wrapper, Title } from 'dot-design-system';
// @ts-ignore
import noWidgetsImgSrc from '../assets/no-widgets.png';
import { getGlobal } from '../utils/wp';
import { subMenuMarginTop } from '../layout/layout.constants';

interface Props {
	message?: string;
}

function EmptyItems({ message }: Props) {
	return (
		<Flex flexDirection={'column'} itemGap={10} alignItems={'center'} mt={subMenuMarginTop}>
			<Wrapper
				component={'img'}
				src={getGlobal().jsUrlPath + noWidgetsImgSrc}
				css={`
					display: block;
					max-width: 100%;
				`}
				width={'400px'}
			/>
			{message && <Title component={'h3'}>{message}</Title>}
		</Flex>
	);
}

export default EmptyItems;