import { Link } from "react-router-dom"
import { User } from "../types"

import "../styles/TopBar.css"

export default function TopBar({ user }: { user: User | undefined }) {
    return (
        <div className="topbar">
            <div className="topbar-left">
                <Link to="/">Home</Link>
                <Link to="/channels">Channels</Link>
            </div>
            <div className="topbar-center">
                <h1>Tanuki's Forum</h1>
            </div>
            {user ? (
                <div className="topbar-right">
                    <Link to={`/u/${user.username}`}>{user.username}</Link>
                    <button onClick={() => {
                        localStorage.removeItem("token")
                        window.location.reload()
                    }}>
                        Logout
                    </button>
                </div>
            ) : (
                <div className="topbar-right">
                    <Link to="/login">Login</Link>
                    <Link to="/register">Register</Link>
                </div>
            )}
        </div>
    )
}