Source: componenets/layouts/Navbar.js

'use client'
import React, { useState } from 'react';
import { signOut } from '@/app/api/api';
import Link from 'next/link'; // Import Link from next/link


/**
 * Component for the navigation bar.
 * 
 * Provides navigation links for registration, login, and sign-out.
 * 
 * @module Navbar
 * @returns {JSX.Element} The JSX element representing the Navbar component.
 */
const Navbar = () => {
  const [isHovered, setIsHovered] = useState(false);

/**
 * Handles the sign-out process.
 * Calls the signOut function from api.js to sign the user out.
 * Redirects the user to the login page after successful sign-out.
 * @returns {void}
 */
  const handleSignOut = async () => {
    try {
      await signOut();
      window.location.href = '/login'; 
    } catch (error) {
      console.error('Error signing out:', error);
    }
  };

  const logoStyle = {
    transition: 'transform 0.3s ease',
    transform: isHovered ? 'scale(1.1)' : 'scale(1)',
    cursor: 'pointer'
  };

  return (
    <nav className="bg-gray-800 text-white py-4 px-8 flex justify-between items-center">
      <div
        className="flex items-center justify-center"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <img
          src="/logo.png"
          className="h-10 w-20 text-gray-700"
          alt="To Do App"
          style={logoStyle}
        />
      </div>
      <div className="text-lg">
        <button className="mr-4">
          <Link href="/register">
              Register
          </Link></button>
        <button className="mr-4">
         <Link href="/login">
              Login
          </Link>
        </button>
        <button onClick={handleSignOut}>Sign Out</button>
      </div>
    </nav>
  );
};

export default Navbar;