import { HTMLAttributes } from 'react'

import Loader from './Loader'

type LoaderPortalProps = HTMLAttributes<HTMLDivElement> & {
  show?: boolean,
  fade?: boolean,
}

export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className, show, fade = true, children, ...other }) => (
  <div className={`loader-container ${className}`} {...other}>
    <div className={'loader-content'}>{children}</div>
    {show && fade && <div className={'loader-fade'}/>}
    {show && <div className={'loader-overlay'}><Loader/></div>}
  </div>
)

export default LoaderPortal