import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from 'src/context/AuthContext';
import 'src/css/navbar.css';

const Navbar: React.FC = () => {
  const { loggedIn, userName, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = async (e: React.MouseEvent) => {
    e.preventDefault();
    try {
      await logout();
      navigate('/');
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  return (
    <nav className="navbar-container">
      <div className="nav-links">
        <Link className="nav-link" to="/">홈</Link>
        <Link className="nav-link" to="/v2/reservation">예약하기</Link>
      </div>
      <div className="nav-actions">
        {!loggedIn ? (
          <>
            <button className="btn btn-secondary" onClick={() => navigate('/v2/login')}>로그인</button>
            <button className="btn btn-primary" onClick={() => navigate('/v2/signup')}>회원가입</button>
          </>
        ) : (
          <div className="profile-info">
            <img className="profile-image" src="/image/default-profile.png" alt="Profile" />
            <span>{userName}</span>
            <div className="dropdown-menu">
              <Link className="dropdown-item" to="/my-reservation/v2">내 예약</Link>
              <div className="dropdown-divider" />
              <a className="dropdown-item" href="#" onClick={handleLogout}>로그아웃</a>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navbar;