import "../styles/button.css";
import "../styles/header.css";
import Logo from "./Logo";
import userIcon from "../assets/user-icon.svg";
import type { AuthorizedUser } from "../types/login";

type Props = {
    user: AuthorizedUser;
    logout: () => Promise<void>;
};

function Header({ user, logout }: Props) {
    return (
        <header className="header">
            <Logo />

            <div className="header-user">
                <span className="header-user-info">
                    <img src={userIcon} alt="User Icon" />
                    <p>{user?.email}</p>
                </span>

                <button className="btn btn-stop btn-logout" onClick={logout}>
                    Logout
                </button>
            </div>
        </header>
    );
}

export default Header;