import { IconListSearch } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

const SidebarGroupsEmptyState = ({ title }: { title: string }) => {
  return (
    <Stack
      sx={{
        alignItems: 'center',
        mt: 5,
        px: 4,
      }}
    >
      <Stack
        sx={th => ({
          backgroundColor: th.palette.new.background.elements.grey,
          borderRadius: '50%',
          height: '64px',
          width: '64px',
          justifyContent: 'center',
          alignItems: 'center',
          mb: 2,
        })}
      >
        <IconListSearch />
      </Stack>
      <Typography
        variant="globalS"
        sx={{ textAlign: 'center' }}
      >
        {title}
      </Typography>
    </Stack>
  );
};

export default SidebarGroupsEmptyState;
