'use client';

import { useEffect } from 'react';
import { useLoading } from '@/contexts/LoadingContext';

export function LoadingBar() {
  const { loading } = useLoading();

  useEffect(() => {
    if (loading.isLoading) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [loading.isLoading]);

  if (!loading.isLoading) return null;

  return (
    <>
      {/* Loading bar at the top */}
      <div className="fixed top-0 left-0 right-0 z-50">
        <div className="h-1 bg-gray-200">
          <div className="h-full bg-amber-600 animate-pulse" style={{ width: '60%' }} />
        </div>
      </div>

      {/* Loading indicator in bottom right corner */}
      <div className="fixed bottom-4 right-4 z-50">
        <div className="bg-white border border-gray-200 rounded-lg shadow-lg p-3 flex items-center space-x-2">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-amber-600"></div>
          <span className="text-sm text-gray-700">
            {loading.message || 'Loading...'}
          </span>
        </div>
      </div>

      {/* Overlay */}
      <div className="fixed inset-0 bg-black bg-opacity-10 z-40" />
    </>
  );
}