import type { ReactNode } from "react";

import { SKIN } from "../lib/skins";
import { SHOW_APP_TITLE } from "../lib/theme";

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 = SKIN.appName,
  mascot = SKIN.mascot,
  status,
  compact = false,
}: Props) {
  if (!SHOW_APP_TITLE) {
    // Still clear the translucent standalone-mode status bar, and keep the status
    // pill - it is the only place an offline connection shows on these screens.
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          padding: status
            ? `calc(${compact ? 8 : 10}px + env(safe-area-inset-top)) 16px 0`
            : "env(safe-area-inset-top) 0 0",
          flex: "none",
        }}
      >
        {status}
      </div>
    );
  }

  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 var(--hue) / .5)",
        }}
      >
        {title}
      </div>
      {status}
    </div>
  );
}