import React from 'react';

interface LogoProps {
  white?: boolean;
  className?: string;
}

const Logo: React.FC<LogoProps> = ({ white, className }) => (
  <div className={`logo main${className || ''}`}>
    <svg width="100%" height="100%" viewBox="0 0 104.2 68.41">
      <g>
        <g className="rings">
          <path
            d="M12.63,34.69a15.07,15.07,0,0,1-1.91.12H3.85v-31h6.87A15.49,15.49,0,0,1,26.18,18.56a19.08,19.08,0,0,1,3.8-.75A19.35,19.35,0,0,0,10.72,0H0V38.66H10.72q.91,0,1.83-.09c0-.5-.07-1-.07-1.52A20.34,20.34,0,0,1,12.63,34.69Z"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M29.9,21.69a15.42,15.42,0,0,0-4.09,1.09A15.55,15.55,0,0,1,16.72,33.6a15.66,15.66,0,0,0-.39,3.45c0,.26,0,.52,0,.77A19.38,19.38,0,0,0,29.9,21.69Z"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M52.12,3.85A15.5,15.5,0,0,1,67.58,18.44a19.09,19.09,0,0,1,3.81-.66,19.33,19.33,0,0,0-38.53,0,19.25,19.25,0,0,1,3.82.59A15.49,15.49,0,0,1,52.12,3.85Z"
            fill={white ? '#fff' : '#0081c6'}
          />
          <path
            d="M71.31,21.64a15.63,15.63,0,0,0-4.06,1,15.5,15.5,0,0,1-9.59,11.18,15.38,15.38,0,0,0-.35,3.27c0,.3,0,.6,0,.89A19.38,19.38,0,0,0,71.31,21.64Z"
            fill={white ? '#fff' : '#0081c6'}
          />
          <path
            d="M47.26,38q0-.49,0-1A15.29,15.29,0,0,0,47,33.93,15.53,15.53,0,0,1,37,22.45a15.44,15.44,0,0,0-4-.83A19.38,19.38,0,0,0,47.26,38Z"
            fill={white ? '#fff' : '#0081c6'}
          />
          <path
            d="M53.61,34.74a14.72,14.72,0,0,1-1.49.07c-.37,0-.75,0-1.12,0a19.12,19.12,0,0,1,.14,2.28c0,.53,0,1.06-.07,1.58l1,0q.72,0,1.41-.06c0-.51-.07-1-.07-1.55A19.62,19.62,0,0,1,53.61,34.74Z"
            fill={white ? '#fff' : '#0081c6'}
          />
          <path
            d="M51,34.77a19.29,19.29,0,0,0-18.14-17c-.35,0-.69,0-1.05,0-.61,0-1.23,0-1.83.09a19.08,19.08,0,0,0-3.8.75A19.4,19.4,0,0,0,12.63,34.69a20.34,20.34,0,0,0-.15,2.36c0,.51,0,1,.07,1.52a19.32,19.32,0,0,0,38.52.06c0-.52.07-1.05.07-1.58A19.12,19.12,0,0,0,51,34.77ZM31.81,52.53A15.49,15.49,0,0,1,16.35,37.82c0-.25,0-.51,0-.77a15.49,15.49,0,0,1,9.48-14.27,15.42,15.42,0,0,1,4.09-1.09,17.18,17.18,0,0,1,1.91-.12c.38,0,.75,0,1.12.05A15.43,15.43,0,0,1,47,33.93a15.29,15.29,0,0,1,.31,3.12q0,.5,0,1A15.49,15.49,0,0,1,31.81,52.53Z"
            fill={white ? '#fff' : '#00ffff'}
          />
          <path
            d="M72.79,52.53A15.5,15.5,0,0,1,57.34,37.94c0-.29,0-.59,0-.89a15.38,15.38,0,0,1,.35-3.27A15.51,15.51,0,0,1,71.31,21.64c.49,0,1-.07,1.48-.07s1.07,0,1.6.08a19.65,19.65,0,0,1-.15-2.32c0-.52,0-1,.07-1.54-.5,0-1-.07-1.52-.07s-.94,0-1.4.06a19.09,19.09,0,0,0-3.81.66,19.36,19.36,0,0,0-14,16.3,19.62,19.62,0,0,0-.15,2.31c0,.52,0,1,.07,1.55a19.33,19.33,0,0,0,38.53,0,19.86,19.86,0,0,1-3.81-.69A15.5,15.5,0,0,1,72.79,52.53Z"
            fill={white ? '#fff' : '#00d0da'}
          />
          <path
            d="M78.45,22.65a15.51,15.51,0,0,1,9.46,11.09,15.84,15.84,0,0,0,4.07,1A19.39,19.39,0,0,0,78.12,18.47c0,.29,0,.57,0,.86A15.78,15.78,0,0,0,78.45,22.65Z"
            fill={white ? '#fff' : '#00d0da'}
          />
          <path
            d="M100.35,19.65v13.6a15.53,15.53,0,0,1-6.78,1.56c-.53,0-1.07,0-1.59-.08a15.84,15.84,0,0,1-4.07-1,15.59,15.59,0,0,1-9.46-11.09,15.78,15.78,0,0,1-.36-3.32c0-.29,0-.57,0-.86A15.48,15.48,0,0,1,101.31,5.92l1.93-3.33a19.33,19.33,0,0,0-28.93,15.2c0,.51-.07,1-.07,1.54a19.65,19.65,0,0,0,.15,2.32A19.36,19.36,0,0,0,88.25,37.91a19.86,19.86,0,0,0,3.81.69c.5,0,1,.06,1.51.06a19.37,19.37,0,0,0,9.67-2.59l1-.56V19.65Z"
            fill={white ? '#fff' : '#00a5df'}
          />
        </g>
        <g className="name">
          <path
            d="M4.52,63.05A3.26,3.26,0,0,0,3,62.7H.54v5.6H2.91A3.37,3.37,0,0,0,4.49,68a2.58,2.58,0,0,0,1.08-1,3,3,0,0,0,0-2.92A2.51,2.51,0,0,0,4.52,63.05Zm-.25,3.3a1.37,1.37,0,0,1-.52.57,1.45,1.45,0,0,1-.75.2H2V63.89h.92a1.56,1.56,0,0,1,.78.2,1.48,1.48,0,0,1,.54.57,1.81,1.81,0,0,1,.2.85A1.86,1.86,0,0,1,4.27,66.35Z"
            fill={white ? '#fff' : '#202764'}
          />
          <rect
            x="8.67"
            y="62.7"
            width="1.46"
            height="5.61"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M15.05,62.7l-2.41,5.6h1.51l.39-1H17l.39,1h1.56l-2.35-5.6ZM15,66.19l.78-2,.77,2Z"
            fill={white ? '#fff' : '#202764'}
          />
          <polygon
            points="22.88 62.7 21.41 62.7 21.41 68.31 25.25 68.31 25.25 67.06 22.88 67.06 22.88 62.7"
            fill={white ? '#fff' : '#202764'}
          />
          <rect
            x="27.92"
            y="62.7"
            width="1.46"
            height="5.61"
            fill={white ? '#fff' : '#202764'}
          />
          <polygon
            points="35.69 65.98 34.06 62.7 32.47 62.7 32.47 68.31 33.77 68.31 33.77 64.75 35.22 67.75 36.16 67.75 37.59 64.75 37.6 68.31 38.9 68.31 38.9 62.7 37.3 62.7 35.69 65.98"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M44.45,62.7H42v5.6h1.47V66.75h1a2.33,2.33,0,0,0,1.66-.55,2,2,0,0,0,.6-1.54,1.82,1.82,0,0,0-.6-1.45A2.46,2.46,0,0,0,44.45,62.7Zm.62,2.66a1,1,0,0,1-.69.22h-.93V63.86h.93a1,1,0,0,1,.69.22.82.82,0,0,1,.24.63A.84.84,0,0,1,45.07,65.36Z"
            fill={white ? '#fff' : '#202764'}
          />
          <rect
            x="49.43"
            y="62.7"
            width="1.46"
            height="5.61"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M57.36,66.92a1.66,1.66,0,0,1-.72.18,1.38,1.38,0,0,1-.77-.22,1.54,1.54,0,0,1-.55-.58,1.76,1.76,0,0,1-.2-.83,1.78,1.78,0,0,1,.2-.83,1.61,1.61,0,0,1,.55-.58,1.46,1.46,0,0,1,.77-.21,1.62,1.62,0,0,1,.75.2,2.27,2.27,0,0,1,.65.55l.84-1a2.92,2.92,0,0,0-1-.71,3,3,0,0,0-1.23-.26,3.09,3.09,0,0,0-1.53.37,2.81,2.81,0,0,0-1.47,2.51A3,3,0,0,0,54,67a2.79,2.79,0,0,0,1.06,1,2.94,2.94,0,0,0,1.5.39,3,3,0,0,0,1.25-.29,3.2,3.2,0,0,0,1.08-.76L58,66.44A2.47,2.47,0,0,1,57.36,66.92Z"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M67.21,64.06a1.58,1.58,0,0,1,.81-.21,1.83,1.83,0,0,1,.78.17,2.21,2.21,0,0,1,.7.45l.83-1a3.09,3.09,0,0,0-1-.61A3.45,3.45,0,0,0,68,62.61a3.32,3.32,0,0,0-1.58.37,2.85,2.85,0,0,0-1.11,1,2.9,2.9,0,0,0,1.06,4,3.15,3.15,0,0,0,1.53.38,4.08,4.08,0,0,0,1.24-.21,3.63,3.63,0,0,0,1.1-.53V65.44H69v1.45a2.27,2.27,0,0,1-1,.27,1.55,1.55,0,0,1-.82-.22,1.47,1.47,0,0,1-.57-.59,1.73,1.73,0,0,1-.21-.85,1.69,1.69,0,0,1,.21-.84A1.54,1.54,0,0,1,67.21,64.06Z"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M75.06,62.7l-2.41,5.6h1.51l.39-1H77l.38,1h1.56l-2.35-5.6ZM75,66.19l.79-2,.76,2Z"
            fill={white ? '#fff' : '#202764'}
          />
          <polygon
            points="84.64 65.98 83.02 62.7 81.42 62.7 81.42 68.31 82.73 68.31 82.73 64.75 84.17 67.75 85.11 67.75 86.55 64.75 86.55 68.31 87.85 68.31 87.85 62.7 86.26 62.7 84.64 65.98"
            fill={white ? '#fff' : '#202764'}
          />
          <polygon
            points="92.4 66.08 95.08 66.07 95.08 64.91 92.4 64.91 92.4 63.86 95.36 63.86 95.36 62.7 90.94 62.7 90.94 68.31 95.44 68.31 95.44 67.14 92.4 67.14 92.4 66.08"
            fill={white ? '#fff' : '#202764'}
          />
          <path
            d="M101.84,65.22a6.11,6.11,0,0,0-1-.34l-.6-.2a.91.91,0,0,1-.33-.2.39.39,0,0,1-.14-.3.33.33,0,0,1,.16-.3.83.83,0,0,1,.43-.1,2.88,2.88,0,0,1,.85.17,4.83,4.83,0,0,1,1,.43l.56-1.16a3.65,3.65,0,0,0-1-.46,4.16,4.16,0,0,0-1.2-.18,2.86,2.86,0,0,0-1.18.22,1.79,1.79,0,0,0-.79.6,1.57,1.57,0,0,0-.27.91,1.39,1.39,0,0,0,.26.89,1.72,1.72,0,0,0,.65.49,7.85,7.85,0,0,0,1,.33l.6.18a1.19,1.19,0,0,1,.35.2.43.43,0,0,1,.14.32.38.38,0,0,1-.19.35,1,1,0,0,1-.52.12,2.71,2.71,0,0,1-1-.24,3.49,3.49,0,0,1-1-.61l-.57,1.14a3.88,3.88,0,0,0,1.2.67,4.19,4.19,0,0,0,1.39.24,3.05,3.05,0,0,0,1.15-.2,1.82,1.82,0,0,0,.81-.59,1.56,1.56,0,0,0,.29-1,1.45,1.45,0,0,0-.27-.91A1.68,1.68,0,0,0,101.84,65.22Z"
            fill={white ? '#fff' : '#202764'}
          />
        </g>
      </g>
    </svg>
  </div>
);

export default Logo;