"use client";

import { motion } from "motion/react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";

interface TopProgressBarProps {
  className?: string;
}

export function TopProgressBar({
  className = "",
}: Readonly<TopProgressBarProps>) {
  const shouldReduceMotion = useReducedMotion();

  return (
    <div
      className={`pointer-events-none fixed inset-x-0 top-0 z-[120] h-[2px] overflow-hidden bg-white/10 ${className}`.trim()}
      aria-hidden="true"
    >
      <motion.div
        className="h-full w-1/3 bg-[var(--slash)] shadow-[0_0_12px_rgba(204,255,0,0.85)]"
        initial={shouldReduceMotion ? { opacity: 1, x: "0%" } : { x: "-120%" }}
        animate={
          shouldReduceMotion
            ? { opacity: 1, x: "0%" }
            : { x: ["-120%", "15%", "45%", "110%"] }
        }
        transition={
          shouldReduceMotion
            ? { duration: 0 }
            : {
                duration: 1.5,
                ease: [0.16, 1, 0.3, 1],
                repeat: Number.POSITIVE_INFINITY,
                repeatDelay: 0.1,
              }
        }
      />
    </div>
  );
}