import type { ReactNode } from "react";

interface Props {
  /** Shown next to the title when the mouse is reachable but the firmware is not. */
  status?: ReactNode;
}

export function AppHeader({ status }: Props) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 16,
        // The status bar is translucent in standalone mode, so make room for it.
        padding: "calc(18px + env(safe-area-inset-top)) 32px 6px",
        flex: "none",
      }}
    >
      <img
        src="/dolphin-mascot.png"
        alt=""
        style={{ width: 64, height: 64, objectFit: "contain" }}
      />
      <div
        style={{
          fontSize: 34,
          fontWeight: 900,
          color: "var(--paper)",
          textShadow: "0 3px 14px oklch(15% 0.05 210 / .5)",
        }}
      >
        Musik Delphin
      </div>
      {status}
    </div>
  );
}