Browserbase Logo

interface LogoProps {
  className?: string;
  variant?: "icon" | "wordmark";
  mode?: "dark" | "light";
}

const COLORS = {
  dark: "#FFFFFF",
  light: "#100D0D",
};

export function BrowserbaseLogo({
  className,
  variant = "icon",
  mode = "dark",
}: LogoProps) {
  const color = COLORS[mode];

  if (variant === "wordmark") {
    return (
      <svg
        role="img"
        viewBox="0 0 200 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
      >
        <title>Browserbase</title>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M30.788 0.96H0.708047V31.04H30.788V0.96ZM-0.251953 0V32H31.748V0H-0.251953Z"
          fill={color}
        />
        <path
          d="M8.5 8H15.5C17.433 8 19 9.567 19 11.5C19 12.617 18.468 13.608 17.646 14.25C18.715 14.82 19.5 15.966 19.5 17.25C19.5 19.32 17.82 21 15.75 21H8.5V8ZM10.5 13.5H15C15.828 13.5 16.5 12.828 16.5 12C16.5 11.172 15.828 10.5 15 10.5H10.5V13.5ZM10.5 18.5H15.25C16.216 18.5 17 17.716 17 16.75C17 15.784 16.216 15 15.25 15H10.5V18.5Z"
          fill={color}
        />
        <path
          d="M45.5 10C42.467 10 40 12.467 40 15.5C40 18.533 42.467 21 45.5 21C47.12 21 48.574 20.304 49.6 19.2V21H51.5V10.2H49.6V11.8C48.574 10.696 47.12 10 45.5 10ZM45.5 19C43.567 19 42 17.433 42 15.5C42 13.567 43.567 12 45.5 12C47.433 12 49 13.567 49 15.5C49 17.433 47.433 19 45.5 19Z"
          fill={color}
        />
        <path
          d="M57 10.2V12.4C57.8 11.0 59.1 10.2 60.8 10.2V12.2C58.7 12.2 57 13.5 57 16V21H55V10.2H57Z"
          fill={color}
        />
        <path
          d="M70 10C66.967 10 64.5 12.467 64.5 15.5C64.5 18.533 66.967 21 70 21C71.82 21 73.44 20.12 74.46 18.76L72.9 17.7C72.24 18.52 71.18 19 70 19C68.3 19 66.86 17.94 66.32 16.44H75.1C75.16 16.14 75.2 15.82 75.2 15.5C75.2 12.467 72.733 10 70 10ZM66.28 14.56C66.78 13.0 68.26 12 70 12C71.74 12 73.22 13.0 73.72 14.56H66.28Z"
          fill={color}
        />
        <path
          d="M84.5 10C82.88 10 81.42 10.696 80.4 11.8V10.2H78.5V24H80.4V19.2C81.42 20.304 82.88 21 84.5 21C87.533 21 90 18.533 90 15.5C90 12.467 87.533 10 84.5 10ZM84.5 19C82.567 19 81 17.433 81 15.5C81 13.567 82.567 12 84.5 12C86.433 12 88 13.567 88 15.5C88 17.433 86.433 19 84.5 19Z"
          fill={color}
        />
        <path
          d="M97.5 10C95.567 10 94 11.567 94 13.5C94 14.9 94.86 16.1 96.1 16.64L98.6 17.74C99.42 18.1 100 18.74 100 19.5C100 20.328 99.328 21 98.5 21C97.672 21 97 20.328 97 19.5H95C95 21.433 96.567 23 98.5 23C100.433 23 102 21.433 102 19.5C102 17.98 101.06 16.72 99.7 16.18L97.2 15.08C96.46 14.76 96 14.16 96 13.5C96 12.672 96.672 12 97.5 12C98.328 12 99 12.672 99 13.5H101C101 11.567 99.433 10 97.5 10Z"
          fill={color}
        />
        <path
          d="M111 10C107.967 10 105.5 12.467 105.5 15.5C105.5 18.533 107.967 21 111 21C112.82 21 114.44 20.12 115.46 18.76L113.9 17.7C113.24 18.52 112.18 19 111 19C109.3 19 107.86 17.94 107.32 16.44H116.1C116.16 16.14 116.2 15.82 116.2 15.5C116.2 12.467 113.733 10 111 10ZM107.28 14.56C107.78 13.0 109.26 12 111 12C112.74 12 114.22 13.0 114.72 14.56H107.28Z"
          fill={color}
        />
      </svg>
    );
  }

  return (
    <svg
      role="img"
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <title>Browserbase</title>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M30.788 0.96H0.708047V31.04H30.788V0.96ZM-0.251953 0V32H31.748V0H-0.251953Z"
        fill={color}
      />
      <path
        d="M8.5 8H15.5C17.433 8 19 9.567 19 11.5C19 12.617 18.468 13.608 17.646 14.25C18.715 14.82 19.5 15.966 19.5 17.25C19.5 19.32 17.82 21 15.75 21H8.5V8ZM10.5 13.5H15C15.828 13.5 16.5 12.828 16.5 12C16.5 11.172 15.828 10.5 15 10.5H10.5V13.5ZM10.5 18.5H15.25C16.216 18.5 17 17.716 17 16.75C17 15.784 16.216 15 15.25 15H10.5V18.5Z"
        fill={color}
      />
    </svg>
  );
}