import type { ReactNode } from "react";
import { Link } from "react-router";
import logo from "../assets/logo.png";

interface TopBarProps {
  /** The role switcher, drawn between the brand and the spacer. */
  nav?: ReactNode;
  /** Right-hand side: the signed-in user, the role chip, Account and Sign out. */
  children?: ReactNode;
}

/** Sticky shop header. Same markup classes as the old page's header.top. */
export function TopBar({ nav, children }: TopBarProps) {
  return (
    <header className="top">
      <div className="top-in">
        <Link className="brand" to="/" aria-label="Packet Station home">
          <img alt="PESCO" src={logo} width={119} height={34} />
          <div className="nm">
            Packet <span>Station</span>
          </div>
        </Link>
        {nav}
        <div className="sp" />
        {children ? <div className="who">{children}</div> : null}
      </div>
    </header>
  );
}