import "../style/settings/settings.css"
import {Header} from './template/Header'

export default function Settings({username} : {username : string}){
    return (
        <div id="main">
            <Header username={username} />
        </div>
    )
}

/**
 * 
 * @param param0 username
 * @returns Header
 */
export function Title({ username }: { username: string }) {
    return (
        <div id="header">
            <div id="header-left"></div>
            <div id="header-center">
                <h1
                    id="IQBall"
                    className="clickable"
                    onClick={() => {
                        location.pathname = "/"
                    }}>
                    <span id="IQ">IQ</span>
                    <span id="Ball">Ball</span>
                </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 = "/settings"
                        }}
                    />
                    <p id="username">{username}</p>
                </div>
            </div>
        </div>
    )
}