import { HTMLAttributes } from 'react'

import { Loader } from '@components/icons'

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

export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className = '', show, fade = true, children, spinnerProps, ...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 {...spinnerProps} /></div>}
  </div>
)

export default LoaderPortal