export interface LogoProps {
  darkMode: boolean;
  className?: string;
}

export function Logo({ darkMode, className }: LogoProps) {
  return (
    <>
      <div className={`hidden xl:block ${className}`}>
        <svg
          width="129"
          height="32"
          viewBox="0 0 129 32"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M68.1306 2.71716C67.1412 3.01689 66.6821 3.81882 66.7483 5.13131C66.7967 6.08693 66.9849 6.46015 67.6453 6.90991C68.3554 7.39354 69.6801 7.39413 70.4074 6.9112C71.4274 6.23391 71.6498 4.2426 70.8079 3.32414C70.252 2.71775 69.0373 2.44236 68.1306 2.71716ZM93.598 2.72986C93.1394 2.86485 92.6147 3.36024 92.409 3.85245C92.2155 4.31562 92.1941 5.50994 92.3708 5.97769C92.7005 6.85041 93.8262 7.40401 94.9552 7.24868C96.1415 7.08558 96.8263 6.25743 96.8297 4.98209C96.8319 4.12466 96.6437 3.61022 96.1699 3.17927C95.5822 2.64449 94.5187 2.45871 93.598 2.72986ZM39.5674 5.19081V7.073H42.507H45.4466V16.5386V26.0043H47.5632H49.6797V16.5386V7.073H52.5635H55.4474L55.415 5.22103L55.3826 3.36905L47.475 3.33883L39.5674 3.30862V5.19081ZM101.751 6.82231C101.71 7.83437 101.665 8.0425 101.395 8.45016C101.026 9.00823 100.407 9.33006 99.5654 9.40143L98.9481 9.45388V11.2619V13.0699H100.359H101.77L101.772 17.0972C101.774 20.1969 101.814 21.3136 101.948 21.9456C102.403 24.0925 103.712 25.4535 105.795 25.9446C106.543 26.1209 108.61 26.1826 109.281 26.0484L109.648 25.9749V24.2247V22.4747L109.026 22.5479C108.12 22.6543 107.136 22.417 106.625 21.969C105.897 21.3294 105.886 21.2529 105.886 16.954V13.0699H107.767H109.648V11.2473V9.42472H107.767H105.886V7.54334V5.66197H103.842H101.798L101.751 6.82231ZM81.3996 9.24728C80.2074 9.55006 79.2819 10.1153 78.7124 10.8883L78.3706 11.3524V10.3886V9.42472H76.4892H74.6079V17.7145V26.0043H76.6068H78.6058V21.0817C78.6058 18.3312 78.6571 15.8889 78.722 15.5466C79.0519 13.8065 80.0581 12.9388 81.8394 12.8579C82.6924 12.8192 82.8402 12.8467 83.4247 13.1534C83.7968 13.3485 84.2304 13.7027 84.4505 13.9914C85.1672 14.931 85.1906 15.148 85.1906 20.8546V26.0098L87.2189 25.9777L89.2473 25.9455V20.0662C89.2473 14.693 89.2287 14.1263 89.031 13.4814C88.4009 11.4251 87.1511 10.0907 85.2143 9.40649C84.3224 9.09136 82.3395 9.0087 81.3996 9.24728ZM61.791 9.57475C60.8625 9.89247 60.2685 10.3297 59.7959 11.0434L59.4393 11.5816V10.5031V9.42472H57.558H55.6766V17.7173V26.0098L57.7049 25.9777L59.7333 25.9455L59.7921 20.6541L59.8509 15.3628L60.1638 14.7749C60.8635 13.4599 61.8043 12.9417 63.643 12.8585L64.8483 12.8039V11.0555V9.30713L63.7018 9.31019C62.8303 9.31242 62.372 9.37592 61.791 9.57475ZM66.9648 17.7145V26.0043H69.0226H71.0803V17.7145V9.42472H69.0226H66.9648V17.7145ZM92.4809 17.7145V26.0043H94.5386H96.5964V17.7145V9.42472H94.5386H92.4809V17.7145ZM111.295 10.0395C111.424 10.3805 112.87 14.0418 114.509 18.176L117.488 25.6927L116.273 28.7288C115.604 30.3986 115.057 31.818 115.057 31.883C115.057 31.9579 115.843 32.0007 117.203 32L119.349 31.9988L123.723 20.9175C126.129 14.8228 128.132 9.74243 128.176 9.6279C128.249 9.43224 128.118 9.42142 126.042 9.45152L123.829 9.48351L121.74 15.0688C120.59 18.1407 119.647 20.6277 119.642 20.5954C119.638 20.563 118.696 18.0496 117.548 15.01L115.461 9.48351L113.261 9.45152L111.061 9.41954L111.295 10.0395Z"
            fill="#051018"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.7706 0.469521C14.5276 -0.156507 16.4469 -0.156507 18.2039 0.469521C19.7785 1.03059 20.9746 2.23855 22.1036 3.75687C23.2224 5.26131 24.4564 7.32948 26.0058 9.92624L26.1126 10.1051C27.7318 12.8187 29.0184 14.975 29.8411 16.7386C30.6687 18.5126 31.1801 20.1935 30.895 21.8851C30.5784 23.7636 29.6094 25.4702 28.1585 26.7045C26.8519 27.8162 25.1465 28.2384 23.1989 28.4367C21.2629 28.6338 18.752 28.6338 15.592 28.6338H15.3825C12.2225 28.6338 9.71158 28.6338 7.77559 28.4367C5.82805 28.2384 4.12259 27.8162 2.81602 26.7045C1.36515 25.4702 0.396151 23.7636 0.0795514 21.8851C-0.205558 20.1935 0.305774 18.5126 1.13338 16.7386C1.95608 14.9751 3.2427 12.8188 4.86188 10.1052L4.96875 9.92613C6.51815 7.32943 7.75215 5.26129 8.87089 3.75687C9.99996 2.23855 11.196 1.03059 12.7706 0.469521ZM17.0043 3.83611C16.0232 3.48651 14.9514 3.48651 13.9702 3.83611C13.408 4.03641 12.7384 4.54526 11.7388 5.8895C10.7416 7.23048 9.59926 9.14058 7.98467 11.8465C6.29975 14.6703 5.10872 16.6707 4.3722 18.2495C3.63152 19.8372 3.50329 20.6951 3.60375 21.2912C3.78056 22.3402 4.32169 23.2932 5.13191 23.9825C5.59229 24.3742 6.39469 24.7037 8.13767 24.8812C9.87086 25.0577 12.199 25.0599 15.4873 25.0599C18.7755 25.0599 21.1037 25.0577 22.8368 24.8812C24.5798 24.7037 25.3822 24.3742 25.8426 23.9825C26.6528 23.2932 27.194 22.3402 27.3708 21.2912C27.4712 20.6951 27.343 19.8372 26.6023 18.2495C25.8658 16.6707 24.6748 14.6703 22.9898 11.8465C21.3753 9.14058 20.2329 7.23048 19.2358 5.8895C18.2361 4.54525 17.5665 4.03641 17.0043 3.83611Z"
            fill="url(#paint0_angular_8120_91422)"
          />
          <defs>
            <radialGradient
              id="paint0_angular_8120_91422"
              cx="0"
              cy="0"
              r="1"
              gradientUnits="userSpaceOnUse"
              gradientTransform="translate(16.5519 16.2888) rotate(124.069) scale(17.119 18.3459)">
              <stop offset="0.0717111" stop-color="#72C3FE" />
              <stop offset="0.372258" stop-color="#9C79FF" />
              <stop offset="0.775515" stop-color="#3AF585" />
            </radialGradient>
          </defs>
        </svg>
      </div>
      <div className={`xl:hidden ${className}`}>
        <svg
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M13.7706 2.46952C15.5276 1.84349 17.4469 1.84349 19.2039 2.46952C20.7785 3.03059 21.9746 4.23855 23.1036 5.75687C24.2224 7.26131 25.4564 9.32948 27.0058 11.9262L27.1126 12.1051C28.7318 14.8187 30.0184 16.975 30.8411 18.7386C31.6687 20.5126 32.1801 22.1935 31.895 23.8851C31.5784 25.7636 30.6094 27.4702 29.1585 28.7045C27.8519 29.8162 26.1465 30.2384 24.1989 30.4367C22.2629 30.6338 19.752 30.6338 16.592 30.6338H16.3825C13.2225 30.6338 10.7116 30.6338 8.77559 30.4367C6.82805 30.2384 5.12259 29.8162 3.81602 28.7045C2.36515 27.4702 1.39615 25.7636 1.07955 23.8851C0.794442 22.1935 1.30577 20.5126 2.13338 18.7386C2.95608 16.9751 4.2427 14.8188 5.86188 12.1052L5.96875 11.9261C7.51815 9.32943 8.75216 7.26129 9.87089 5.75687C11 4.23855 12.196 3.03059 13.7706 2.46952ZM18.0043 5.83611C17.0232 5.48651 15.9514 5.48651 14.9702 5.83611C14.408 6.03641 13.7384 6.54526 12.7388 7.8895C11.7416 9.23049 10.5993 11.1406 8.98467 13.8465C7.29975 16.6703 6.10872 18.6707 5.3722 20.2495C4.63152 21.8372 4.50329 22.6951 4.60375 23.2912C4.78056 24.3402 5.32169 25.2932 6.13191 25.9825C6.59229 26.3742 7.39469 26.7037 9.13767 26.8812C10.8709 27.0577 13.199 27.0599 16.4873 27.0599C19.7755 27.0599 22.1036 27.0577 23.8368 26.8812C25.5798 26.7037 26.3822 26.3742 26.8426 25.9825C27.6528 25.2932 28.194 24.3402 28.3708 23.2912C28.4712 22.6951 28.343 21.8372 27.6023 20.2495C26.8658 18.6707 25.6748 16.6703 23.9898 13.8465C22.3753 11.1406 21.2329 9.23048 20.2358 7.8895C19.2361 6.54526 18.5665 6.03641 18.0043 5.83611Z"
            fill="url(#paint0_angular_8144_91419)"
          />
          <defs>
            <radialGradient
              id="paint0_angular_8144_91419"
              cx="0"
              cy="0"
              r="1"
              gradientUnits="userSpaceOnUse"
              gradientTransform="translate(17.5519 18.2888) rotate(124.069) scale(17.119 18.3459)">
              <stop offset="0.0717111" stop-color="#72C3FE" />
              <stop offset="0.372258" stop-color="#9C79FF" />
              <stop offset="0.775515" stop-color="#3AF585" />
            </radialGradient>
          </defs>
        </svg>
      </div>
    </>
  );
}

export default Logo;