import { Link } from 'react-router';
import RoundButton from './RoundButton.tsx';

export default function NavBar(){
    return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5em 1em"}}>
        <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
            {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
            <span className="material-symbols-outlined"
            style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
            <Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
            <Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
            <Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
        </div>
        <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
            <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
        </div>
    </nav>);
}