import { useNProgress } from '@tanem/react-nprogress'

const Loading: React.FC<{ isRouteChanging: boolean }> = ({
  isRouteChanging,
}) => {
  const { animationDuration, isFinished, progress } = useNProgress({
    isAnimating: isRouteChanging,
  })

  return (
    <>
     <style jsx>{`
  .container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    opacity: ${isFinished ? 0 : 1};
    pointer-events: none;
    transition: opacity ${animationDuration}ms linear;
  }

  .bar {
    background: #2a1c61;
    height: 0.2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-left: ${(-1 + progress) * 100}%;
    transition: margin-left ${animationDuration}ms linear;
  }

  .spinner {
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    display: block;
    height: 100%;
    opacity: 1;
    position: absolute;
    right: 0;
    transform: rotate(3deg) translate(0px, -4px);
    width: 100px;
  }
`}</style>
      <div className="container">
        <div className="bar">
          <div className="spinner" />
        </div>
      </div>
    </>
  )
}

export default Loading