'use client'

export function TopLoader({ active }: { active: boolean }) {
  if (!active) return null
  return (
    <div className="pointer-events-none absolute inset-x-0 top-0 h-[2px] overflow-hidden">
      <div className="top-loader-bar">
        <span className="top-loader-head" />
      </div>
      <style jsx>{`
        .top-loader-bar {
          position: absolute;
          inset: 0;
          background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 60, 90, 0.45) 50%,
            rgba(255, 90, 120, 0.9) 85%,
            #ff2e63 100%
          );
          transform: translateX(-100%);
          animation: top-loader-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        .top-loader-head {
          position: absolute;
          right: 0;
          top: -2px;
          height: 6px;
          width: 10px;
          border-radius: 9999px;
          background: #ff6b8a;
          box-shadow:
            0 0 6px 1px #ff2e63,
            0 0 14px 2px rgba(255, 46, 99, 0.75),
            0 0 24px 4px rgba(255, 46, 99, 0.35);
        }
        @keyframes top-loader-slide {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}</style>
    </div>
  )
}