import { BASE } from "../../Constants"
import { User } from "../../model/User"

/**
 *
 * @param param0 username
 * @returns Header
 */
export function Header({ user }: { user: User }) {
    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">
                    <img
                        id="img-account"
                        src={user.profilePicture}
                        onClick={() => {
                            location.pathname = BASE + "/settings"
                        }}
                        alt="photo de profil"
                    />
                    <p id="username">{user.name}</p>
                </div>
            </div>
        </div>
    )
}