import { ReactNode } from 'react';
import Icon from '../Icon';
import './NoData.scss';

export interface NoDataProps {
  /**
   * The content that to be displayed if no data not found
   */
  content: string | ReactNode;
  /**
   * Image that to be displayed if you don't have data
   */
  image?: string;
  /**
   * Size of the image that to be displayed if you don't have data
   */
  size?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
}
const NoData = ({ content, image, size }: NoDataProps) => {
  return (
    <div className="no-data-container">
      <div>
        <Icon
          name={image ? image : 'no_data_found'}
          className={`no-data-image--${size}`}
        />
      </div>
      <div className="no-data-content">{content}</div>
    </div>
  );
};
export default NoData;