import React from "react";
import { useAppSelector } from "../hooks/useRedux";

const TopLoader = () => {
  const isLoading = useAppSelector((state) => state.loading.isLoading);
  return (
    isLoading && (
      <div
        className={`fixed top-0 left-0 w-full h-[3px] z-[9999] pointer-events-none transition-opacity duration-500 ${
          isLoading ? "opacity-100" : "opacity-0"
        }`}
      >
        {/* Primary loading bar */}
        <div className="absolute inset-0 bg-[#EE0434] shadow-[0_0_15px_rgba(238,4,52,0.6)] animate-[progress-fill_2s_infinite_ease-in-out]" />

        {/* Secondary shimmer effect for a more active feel */}
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent w-1/2 animate-[shimmer-flow_1.5s_infinite_linear]" />

        <style>{`
        @keyframes progress-fill {
          0% { width: 0%; left: 0%; }
          50% { width: 70%; left: 15%; }
          100% { width: 0%; left: 100%; }
        }
        @keyframes shimmer-flow {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(200%); }
        }
      `}</style>
      </div>
    )
  );
};

export default TopLoader;