export function Logomark(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width="81"
      height="50"
      version="1"
      viewBox="0 0 60.75 37.5"
      {...props}
    >
      <defs>
        <filter id="a" width="100%" height="100%" x="0%" y="0%">
          <feColorMatrix
            colorInterpolationFilters="sRGB"
            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
          />
        </filter>
        <filter id="b" width="100%" height="100%" x="0%" y="0%">
          <feColorMatrix
            colorInterpolationFilters="sRGB"
            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0"
          />
        </filter>
        <clipPath id="c">
          <path d="M.277.309H60V37H.277Zm0 0" />
        </clipPath>
        <mask id="d">
          <g filter="url(#a)">
            <g filter="url(#b)" transform="matrix(.08765 0 0 .08811 .276 .26)">
              <image
                xlinkHref="/src/images/logomark.svg"
                width="684"
                height="420"
              />
            </g>
          </g>
        </mask>
      </defs>
      <g clipPath="url(#c)" mask="url(#d)">
        <image
          xlinkHref="/src/images/logomark.svg"
          width="684"
          height="420"
          transform="matrix(.08765 0 0 .08811 .276 .26)"
        />
      </g>
    </svg>
  )
}

export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="160"
      height="40"
      viewBox="0 0 120 30"
      {...props}
    >
      <image xlinkHref="/src/images/mycelium.svg" width="120" height="30" />
    </svg>
  )
}
