import * as React from 'react';
import { FC, CSSProperties } from 'react';

interface IconProps {
  color?: string;
  size?: number;
  style?: CSSProperties;
  linkDisabled?: boolean;
}

const AdAlongLogo: FC<IconProps> = ({
  color = 'white',
  size = 12,
  style,
  linkDisabled = false,
}) => {
  const svgContent = (
    <svg
      width={size}
      height={size * (34.3 / 133)}
      viewBox='0 0 133 34.3'
      fill={color}
      style={style}
      aria-hidden='true'
    >
      <g>
        {/* Letter A */}
        <path d='M12.9,5.9l3.6,10.3H9.2L12.9,5.9z M10,0L0,27.2h5.4L7.6,21h10.6l2.2,6.2h5.5L15.9,0H10z' />

        {/* Letter D */}
        <path d='M43.6,23.3c0,1.2,0.1,3.1,0.1,3.8h-4.7c-0.1-0.4-0.2-1.8-0.2-2.6c-0.8,1.4-2.7,2.5-5.1,2.5 c-5.2,0-8.8-4-8.8-9.5c0-5.3,3.6-9.4,8.7-9.4c3.1,0,4.6,1.3,5.1,2.2V0h4.8V23.3z M34.4,22.7c2.5,0,4.5-1.9,4.5-5.2 c0-3.2-2-5-4.5-5s-4.5,1.8-4.5,5.1S31.8,22.7,34.4,22.7z' />

        {/* Letter A */}
        <path d='M51.9,0l-6,16.3v10.8h1.4l2.2-6.2H60l2.2,6.2h5.5L57.8,0H51.9z M51.1,16.1l3.6-10.3l3.6,10.3H51.1z' />

        {/* Letter L */}
        <rect x='69.2' y='0' width='4.9' height='27.1' />

        {/* Letter O */}
        <path d='M85.4,8c-5.4,0-9.5,4-9.5,9.5c0,5.5,4.1,9.5,9.5,9.5c5.4,0,9.5-4,9.5-9.5C94.9,12,90.8,8,85.4,8 M85.4,22.7c-2.4,0-4.6-1.8-4.6-5.1c0-3.4,2.2-5.1,4.6-5.1c2.4,0,4.6,1.7,4.6,5.1C90,21,87.8,22.7,85.4,22.7' />

        {/* Letter N */}
        <path d='M106.3,8.2c-2,0-4.1,0.9-5.2,2.8V8.7h-4.8v18.5h4.9V16.5c0-2.1,1.3-3.8,3.4-3.8c2.4,0,3.4,1.6,3.4,3.7 v10.8h4.9V15.5C112.8,11.4,110.7,8.2,106.3,8.2' />

        {/* Letter G */}
        <path d='M128.3,8.4v2.1C127.7,9.3,126,8,123.1,8c-5,0-8.4,4.1-8.4,8.9c0,5.1,3.6,8.9,8.4,8.9 c2.6,0,4.3-1.1,5-2.3v1.3c0,3.5-1.7,5.1-4.8,5.1c-2.3,0-3.9-1.4-4.2-3.4l-4.4,1.2c0.5,3.5,3.8,6.6,8.8,6.6 c6.8,0,9.5-4.6,9.5-9.6V8.4H128.3z M124,21.6c-2.5,0-4.3-1.8-4.3-4.6c0-2.8,1.9-4.6,4.3-4.6c2.4,0,4.3,1.8,4.3,4.6 C128.2,19.7,126.5,21.6,124,21.6z' />
      </g>
    </svg>
  );

  if (linkDisabled) {
    return svgContent;
  }

  return (
    <a
      href='https://www.adalong.com/'
      target='_blank'
      rel='noopener noreferrer'
      onClick={(e) => e.stopPropagation()}
      aria-label='Visit Adalong website'
      style={{
        display: 'inline-block',
        cursor: 'pointer',
        ...style,
      }}
    >
      {svgContent}
    </a>
  );
};

export default AdAlongLogo;