import React from 'react';

const PageLoader = () => {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50">
      <div className="flex flex-col items-center justify-center space-y-8">
        <div className="relative w-40">
          
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="bg-white dark:bg-gray-900 rounded-full ">
              <h1 className="text-xl font-bold text-primary dark:text-blue-400 animate-pulse">
                KJ HRMS
              </h1>
            </div>
          </div>
        </div>
        
        <div className="w-52 h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
          <div className="h-full bg-primary animate-[loading_1.5s_ease-in-out_infinite]"></div>
        </div>
      </div>
      
      <style jsx>{`
        @keyframes loading {
          0% {
            width: 0%;
            margin-left: 0;
          }
          50% {
            width: 100%;
            margin-left: 0;
          }
          100% {
            width: 0%;
            margin-left: 100%;
          }
        }
      `}</style>
    </div>
  );
};

export default PageLoader;