src/app/components/navigation/Navigation.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../../hooks/index.ts';

const Navigation = () => {
  const { isAuthenticated } = useAuth();

  return (
    <nav className="fixed top-4 left-1/2 transform -translate-x-1/2 z-40">
      <div className="flex items-center gap-2">
        {isAuthenticated && (
          <>
            <NavLink
              to="/analysis"
              className={({ isActive }) =>
                `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
                  isActive
                    ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
                    : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
                }`
              }
            >
              Analysis
            </NavLink>
            <NavLink
              to="/chat"
              className={({ isActive }) =>
                `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
                  isActive
                    ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
                    : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
                }`
              }
            >
              Chatbot
            </NavLink>
          </>
        )}
      </div>
    </nav>
  );
};

export default Navigation;