Mem0 Logo

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

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

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

  if (variant === "wordmark") {
    return (
      <svg
        role="img"
        viewBox="0 0 80 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
      >
        <title>Mem0</title>
        <path
          d="M 0 6.5 C 0 2.91 2.91 0 6.5 0 C 10.09 0 13 2.91 13 6.5 C 13 10.09 10.09 13 6.5 13 C 2.91 13 0 10.09 0 6.5 Z M 8.907 5.29 C 9.018 5.145 9.04 4.951 8.966 4.784 C 8.892 4.618 8.733 4.504 8.552 4.489 C 8.37 4.473 8.194 4.558 8.093 4.71 L 5.936 7.73 L 4.853 6.646 C 4.655 6.469 4.354 6.478 4.166 6.665 C 3.979 6.853 3.97 7.154 4.147 7.352 L 5.647 8.852 C 5.751 8.956 5.895 9.009 6.041 8.997 C 6.188 8.985 6.321 8.909 6.407 8.79 Z"
          fill="#166534"
        />
        <path
          d="M18 2H20.5L23.5 9.5L26.5 2H29V14H27V5.5L23.8 13H23.2L20 5.5V14H18V2Z"
          fill={color}
        />
        <path
          d="M33 8C33 4.967 35.467 2.5 38.5 2.5C41.533 2.5 44 4.967 44 8C44 11.033 41.533 13.5 38.5 13.5C35.467 13.5 33 11.033 33 8ZM38.5 11.5C40.433 11.5 42 9.933 42 8C42 6.067 40.433 4.5 38.5 4.5C36.567 4.5 35 6.067 35 8C35 9.933 36.567 11.5 38.5 11.5Z"
          fill={color}
        />
        <path
          d="M47 2H49.5L52.5 9.5L55.5 2H58V14H56V5.5L52.8 13H52.2L49 5.5V14H47V2Z"
          fill={color}
        />
        <path
          d="M62 8C62 4.967 64.467 2.5 67.5 2.5C70.533 2.5 73 4.967 73 8C73 11.033 70.533 13.5 67.5 13.5C64.467 13.5 62 11.033 62 8ZM67.5 11.5C69.433 11.5 71 9.933 71 8C71 6.067 69.433 4.5 67.5 4.5C65.567 4.5 64 6.067 64 8C64 9.933 65.567 11.5 67.5 11.5Z"
          fill={color}
        />
      </svg>
    );
  }

  return (
    <svg
      role="img"
      viewBox="0 0 13 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <title>Mem0</title>
      <path
        d="M 0 6.5 C 0 2.91 2.91 0 6.5 0 C 10.09 0 13 2.91 13 6.5 C 13 10.09 10.09 13 6.5 13 C 2.91 13 0 10.09 0 6.5 Z M 8.907 5.29 C 9.018 5.145 9.04 4.951 8.966 4.784 C 8.892 4.618 8.733 4.504 8.552 4.489 C 8.37 4.473 8.194 4.558 8.093 4.71 L 5.936 7.73 L 4.853 6.646 C 4.655 6.469 4.354 6.478 4.166 6.665 C 3.979 6.853 3.97 7.154 4.147 7.352 L 5.647 8.852 C 5.751 8.956 5.895 9.009 6.041 8.997 C 6.188 8.985 6.321 8.909 6.407 8.79 Z"
        fill="#166534"
      />
    </svg>
  );
}