import classnames from 'classnames'
import Spinner from './spinner'

export default function Loading({
  loading,
  className,
  children,
}: {
  loading: boolean
  className: string
  children: any
}) {
  const classNames = classnames(className, {
    loaded: !loading,
    'opacity-50': loading,
  })
  return (
    <div className="relative">
      <div className={classNames}>{children}</div>
      {loading && (
        <div className="absolute inset-0 w-full h-full flex justify-center items-center pointer-events-node">
          <Spinner />
        </div>
      )}
    </div>
  )
}