// Loader.jsx
import React from 'react';
import Image from 'next/image';
const Loader = ({ isDarkMode, onToggleDarkMode }) => {
const loadingGif = isDarkMode ? '/dark.gif' : '/light.gif';
return (
<div className={`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'}`}>
<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}
>


</button>
</div>
</div>
);
};
export default Loader;

tailwindin dark: class component yapısını kullanıyorum fakat butona bastığım zaman dark moddan light moda geçince beyaz ve istediğim sabit prop olduğu için fakat temayı toggle dark mode yani dark moda geçir dediğim zamanda aynısı geliyor gif olarak nedense çözemedim yardımcı olabilirseniz sevinirim