import * as React from "react";

const SvgIcon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="122"
    height="30"
    fill="none"
    viewBox="0 0 122 30"
  >
    <mask
      id="a"
      width="30"
      height="30"
      x="0"
      y="0"
      maskUnits="userSpaceOnUse"
      style={{ maskType: "luminance" }}
    >
      <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
    </mask>
    <g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
      <path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
      <path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
      <path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
      <path d="M20.253 27.803c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
      <path d="M9.673 27.803c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
      <path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
      <path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
      <path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
    </g>
    <path
      fill="#48774B"
      d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
    ></path>
  </svg>
);

export function Logo(props) {
  return (
    <div className="bg-transparent px-2 py-1 rounded">
      <SvgIcon {...props} />
    </div>
  );
}
