'use client';

import Image from 'next/image';
import { useSelector } from 'react-redux';
import { RootState } from '@/store/store';

const GlobalLoader = () => {
  const loading = useSelector((state: RootState) => state.loader.loading);

  if (!loading) return null;

  return (
    <div className="loader-widget fixed inset-0 flex items-center justify-center">
      <div className="w-[50%] z-50">
        <Image
          src="/main/wosa-loader.gif"
          alt="Loading..."
          width={0}
          height={0}
          sizes="100vw"
          className="h-auto w-full"
          priority
        />
      </div>
      <div className="loader-bg-class"></div>
    </div>
  );
};

export default GlobalLoader;