import ClickableLink from './ClickableLink.tsx';
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>
            <ClickableLink url="/" text = "Accueil" />
            <ClickableLink url="/game" text = "Jeu" />
        </div>
        <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
            <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
        </div>
    </nav>);
}