frontend/components/Loader.tsx

import React, { useContext } from 'react';
import { ThemeContext } from '../App';

interface LoaderProps {
  loading: boolean;
}

const Loader: React.FC<LoaderProps> = ({ loading }) => {
  const { theme } = useContext(ThemeContext);

  return (
    <div
      className={`fixed top-0 left-0 w-full h-full flex justify-center items-center z-[9999] transition-opacity duration-1000 ease-in-out ${
        loading ? 'opacity-100' : 'opacity-0 pointer-events-none'
      } ${theme === 'dark' ? 'bg-[#0a0a0a]' : 'bg-[#f8f9fa]'}`}
    >
      <div
        className={`text-3xl animate-pulse ${
          theme === 'dark' ? 'text-[#00ffff]' : 'text-[#0066cc]'
        }`}
      >
        Initializing Mathematical Cosmos...
      </div>
    </div>
  );
};

export default Loader;