import { BASE } from "../../Constants"
import accountSvg from "../../assets/account.svg"
/**
 *
 * @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 = BASE + "/"
                    }}>
                    <span id="IQ">IQ</span>
                    <span id="Ball">CourtObjects</span>
                </h1>
            </div>
            <div id="header-right">
                <div className="clickable" id="clickable-header-right">
                    {/* <AccountSvg id="img-account" /> */}
                    <img
                        id="img-account"
                        src={accountSvg}
                        onClick={() => {
                            location.pathname = BASE + "/settings"
                        }}
                    />
                    <p id="username">{username}</p>
                </div>
            </div>
        </div>
    )
}