'use client';

import { useEffect, useState } from 'react';

export function LoadingIndicator() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleStart = () => setIsVisible(true);
    const handleEnd = () => setIsVisible(false);

    window.addEventListener('beforeunload', handleStart);
    window.addEventListener('load', handleEnd);

    return () => {
      window.removeEventListener('beforeunload', handleStart);
      window.removeEventListener('load', handleEnd);
    };
  }, []);

  if (!isVisible) return null;

  return (
    <div className="fixed top-0 left-0 right-0 z-[9999]">
      <div className="h-1 bg-gradient-to-r from-primary via-primary/70 to-primary animate-pulse">
        <div className="h-full bg-gradient-to-r from-primary to-primary/50 animate-[shimmer_2s_infinite]" />
      </div>
    </div>
  );
}