import type { ReactNode } from "react";

interface Props {
  title?: string;
  mascot?: string;
  /** Shown next to the title when the mouse is reachable but the firmware is not. */
  status?: ReactNode;
  /** The phone size: a smaller mascot and title. */
  compact?: boolean;
}

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