import { Link } from 'preact-router/match'
import { isAdministrator, USER_ROLE_ADMIN, USER_ROLE_MODERATOR } from '../../shared/constants.js'

const ROLE_LABEL = {
    [USER_ROLE_ADMIN]: 'Admin',
    [USER_ROLE_MODERATOR]: 'Moderatore',
}

export const Header = ({ user, noLogin }) => (
    <header>
        <div class="logo">
            <a href="/">PHC / Problemi</a>
        </div>
        <nav>
            {user ? (
                <>
                    {isAdministrator(user.role) && (
                        <div class="nav-item">
                            <Link activeClassName="active" href="/admin">
                                Pannello Admin
                            </Link>
                        </div>
                    )}
                    <div class="nav-item">
                        <Link activeClassName="active" href="/profile">
                            @{user.id}
                            {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                        </Link>
                    </div>
                </>
            ) : (
                !noLogin && (
                    <div class="nav-item">
                        <Link href="/login">Login</Link>
                    </div>
                )
            )}
        </nav>
    </header>
)