import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Header.css';
import AuthModal from './AuthModal';
import { useAuth } from './AuthContext';

function Header() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const { isLoggedIn, logout } = useAuth();

    const openModal = () => {
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };

    const handleLogout = () => {
        logout();
    };

    return (
        <header>
            <div className="container">
                <div className="logo">
                    <img src={process.env.PUBLIC_URL + '/images/Logo(Nav) (1).png'} alt="изображение" />
                    <span>KeyNest</span>
                </div>
                <nav className="menu">
                    <Link to="/">Home</Link>
                    <Link to="/about">About</Link>
                    <Link to="/myrentals">Rentals</Link> {/* Updated link */}
                    <Link to="/contact">Contact</Link>
                </nav>
                {isLoggedIn ? (
                    <button className="logout-button button" onClick={handleLogout}>Logout</button>
                ) : (
                    <button className="login-button button" onClick={openModal}>Login</button>
                )}
                <AuthModal isOpen={isModalOpen} onRequestClose={closeModal} />
            </div>
        </header>
    );
}

export default Header;