import { BASE } from "../../Constants"
import "../../style/component/header.css"

/**
 *
 * @param param0 username
 * @returns Header
 */
export function Header({ username }: { username: string }) {
    return (
        <div id="header">
            <div id="header-left">
                
            </div>
            <div id="header-center">
                <h1
                    id="iqball"
                    className="clickable"
                    onClick={() => {
                        location.pathname = "/"
                    }}>
                    IQBall
                </h1>
            </div>
            <div id="header-right">
                <div className="clickable" id="clickable-header-right">
                    {/* <AccountSvg id="img-account" /> */}
                    <img
                        id="img-account"
                        src="account.svg"
                        onClick={() => {
                            location.pathname = BASE + "/settings"
                        }}
                    />
                    <p id="username">{username}</p>
                </div>
            </div>
        </div>
    );
}