import React, { ReactElement, ReactNode } from 'react';
import classNames from 'clsx';

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

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

type Props = {
  withBorder: boolean;
  withOpacity: boolean;
  icon: ReactElement;
  children: ReactNode;
};

function Empty({ withBorder = false, withOpacity = false, icon, children }: Props) {
  return (
    <Stack
      className={classNames(styles.Root, {
        [styles.Root___withBorder]: withBorder,
        [styles.Root___withOpacity]: withOpacity,
      })}
      justifyContent="center"
      alignItems="center"
    >
      <Stack className={styles.Icon} justifyContent="center" alignItems="center">
        {icon}
      </Stack>
      {children}
    </Stack>
  );
}

export default Empty;
