import React from 'react';
import cn from 'classnames';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import styles from './loader.module.css';

interface Props {
  className?: string
  loading?: boolean
  children?: React.ReactNode
  size?: number
  style?: Record<string, any>
}

const Loader = React.memo<Props>(
  ({
    className = '',
    loading = true,
    children = null,
    size = 50,
    style = { minHeight: '150px' },
  }) => (!loading ? (
    <>
      {children}
    </>
  ) : (
    <div className={cn(styles.wrapper, className)} style={style}>
      {/* <div className={ styles.loader } data-size={ size } /> */}
      <AnimatedSVG name={ICONS.LOADER} size={size} />
    </div>
  )),
);

Loader.displayName = 'Loader';

export default Loader;
