import React from 'react';
import PropTypes from 'prop-types';
import { SettingsOutlined } from '@mui/icons-material';

import { Stack, Typography } from '@/mui/components';

import styles from './Empty.module.scss';

function Empty({ hasSearchQuery = false }) {
  return (
    <Stack
      spacing={1}
      fullWidth
      justifyContent="center"
      alignItems="center"
      direction="column"
      className={styles.Wrapper}
    >
      <Stack justifyContent="center" alignItems="center" className={styles.Info}>
        <SettingsOutlined fontSize="x5Large" htmlColor="shades.800" />
      </Stack>
      <Typography variant="subtitle1" component="div" color="text.primary">
        No rules to show.
      </Typography>
      <Typography variant="caption" color="text.secondary" fontWeight={400}>
        {hasSearchQuery ? 'Try another search query' : 'Start adding them by clicking button “+ Create New Rule”'}
      </Typography>
    </Stack>
  );
}

Empty.propTypes = {
  hasSearchQuery: PropTypes.bool,
};

export default Empty;
