components/Navbar.tsx

'use client'

import { ThemeToggle } from './ThemeToggle';
import { Button } from './ui/button';
import { useRouter, usePathname } from 'next/navigation';
import { LogOut, RefreshCw, ImagePlus } from 'lucide-react';
import { useState } from 'react';
import Link from 'next/link';

interface NavbarProps {
  onReload: () => void;
}

export default function Navbar({ onReload }: NavbarProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [isReloading, setIsReloading] = useState(false);

  const handleLogout = () => {
    // Clear the authentication cookie
    document.cookie = 'isAuthenticated=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    // Redirect to the password page
    router.push('/password');
  };

  const handleReload = () => {
    setIsReloading(true);
    onReload();
    setTimeout(() => setIsReloading(false), 500); // Reset after 0.5 seconds
  };

  const handleHomeClick = () => {
    if (pathname === '/') {
      window.location.reload();
    } else {
      router.push('/');
    }
  };

  const isPasswordPage = pathname === '/password';

  return (
    <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#ededed] dark:border-b-gray-800 px-10 py-0.5 bg-white dark:bg-amoled-black text-[#141414] dark:text-white">
      <div className="flex items-center gap-4 cursor-pointer" onClick={handleHomeClick}>
        <ImagePlus className="h-6 w-6 text-primary" />
        <h2 className="text-lg font-bold leading-tight tracking-[-0.015em]">Imagine</h2>
      </div>
      <div className="flex items-center gap-4">
        {!isPasswordPage && (
          <>
            <Button 
              onClick={handleReload} 
              variant="ghost" 
              size="icon" 
              title="Reload batches"
              className={`transition-transform duration-500 ease-in-out ${isReloading ? 'rotate-180' : ''}`}
              disabled={isReloading}
            >
              <RefreshCw className={`h-[1.2rem] w-[1.2rem] ${isReloading ? 'animate-spin' : ''}`} />
              <span className="sr-only">Reload</span>
            </Button>
            <ThemeToggle />
            <Button onClick={handleLogout} variant="ghost" size="icon">
              <LogOut className="h-[1.2rem] w-[1.2rem]" />
              <span className="sr-only">Logout</span>
            </Button>
          </>
        )}
      </div>
    </header>
  );
}