import { useTheme } from "../ThemeContext";
import trlDark from "../assets/logos/trl-dark.png";
import trlLight from "../assets/logos/trl-light.png";
import harborPng from "../assets/logos/harbor-wordmark.png";
import openenvPng from "../assets/logos/openenv.png";

/**
 * Project marks, used nominatively so the room can attach a name to a logo.
 *
 * Each mark stays its project's property. TRL ships a light and a dark variant,
 * so the deck picks by theme. Harbor publishes a single wordmark on black,
 * which reads on the dark stage and needs a plate on the light one.
 */

export function TRLMark({ height = 34 }: { height?: number }) {
  const { mode } = useTheme();
  return (
    <img
      src={mode === "dark" ? trlDark : trlLight}
      alt="TRL"
      style={{ height, width: "auto", display: "inline-block", verticalAlign: "-0.14em" }}
    />
  );
}

export function HarborMark({ height = 26 }: { height?: number }) {
  const { mode } = useTheme();
  return (
    <img
      src={harborPng}
      alt="Harbor"
      style={{
        height,
        width: "auto",
        display: "inline-block",
        verticalAlign: "-0.06em",
        // the wordmark is white on transparent, so the light theme inverts it
        filter: mode === "dark" ? "none" : "invert(1)",
      }}
    />
  );
}

/**
 * OpenEnv's mark, the PyTorch flame inside a wireframe cube.
 *
 * The org publishes it on an opaque dark plate, so this copy is keyed off that
 * background. The artwork is orange either way, so unlike Harbor's wordmark it
 * needs no per-theme treatment.
 */
export function OpenEnvMark({ height = 42 }: { height?: number }) {
  return (
    <img
      src={openenvPng}
      alt="OpenEnv"
      style={{ height, width: "auto", display: "inline-block", verticalAlign: "-0.22em" }}
    />
  );
}