import React from 'react';
import Image from 'next/image';

const Loader = ({ isDarkMode, onToggleDarkMode }) => {
  const loadingGif = isDarkMode ? '/dark.gif' : '/light.gif';

  const containerClassName = `fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-opacity-500 ${isDarkMode ? 'bg-black text-white' : 'bg-white text-black'}`;

  return (
    <div className={containerClassName}>
      <div className="flex flex-col items-center">
        <img
          id="loadingGif"
          src={loadingGif}
          alt="loading"
          className='transition-transform duration-1000 ease-in-out'
          style={{ width: '15%' }}
        />
        <div className="mb-4 p-8">Hello Batman</div>
        <button
          className={`p-2 ${isDarkMode ? 'bg-white text-black' : 'bg-black text-white'}`}
          onClick={onToggleDarkMode}
        >
          Toggle Dark Mode
        </button>
      </div>
    </div>
  );
};

export default Loader;