import React from 'react';
import { Link } from "gatsby";
import logo from "../images/favicon.png";

export const Navbar = () => {
    const navbarStyle = {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '10px 20px',
        backgroundColor: '#101010',
        color: 'white',
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        zIndex: 1000,
    };

    const leftStyle = {
        display: 'flex',
        alignItems: 'center',
        gap: '15px',
        fontSize: '20px',
        fontWeight: 'bold',
    };

    const rightStyle = {
        display: 'flex',
        gap: '20px',
    };

    const linkStyle = {
        display: 'flex',
        alignItems: 'center',
        gap: '10px',
        color: 'white',
        textDecoration: 'none',
        fontSize: '16px',
    };

    return (
        <nav style={navbarStyle}>
            <div style={leftStyle}>
                {/* Wrap both the logo and text inside the same Link */}
                <Link to="/" style={linkStyle}>
                    <img src={logo} alt="Logo" style={{ height: '30px' }} />
                    TSP Visualization
                </Link>
            </div>
            <div style={rightStyle}>
                <Link
                    to="/about"
                    style={linkStyle}
                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
                    onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
                    About
                </Link>
                <Link
                    to="https://forge.techtransthai.org/deepseekers/traveling-salesman-bangkok"
                    style={linkStyle}
                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
                    onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
                    Source Code
                </Link>
            </div>
        </nav>
    );
};