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

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

const AttributionLogo: FC<IconProps> = ({
  color = 'white',
  size = 12,
  style,
  linkDisabled = false,
}) => {
  // Generate a unique ID for this instance
  const clipId = useId();

  const svgContent = (
    <svg
      width={size}
      height={size * (631.2 / 600)}
      viewBox='550 0 600 631.2'
      style={style}
      aria-hidden='true'
    >
      <defs>
        <clipPath id={`letterAClip-${clipId}`}>
          <path
            d='M781.9,96.9l-90.7,245.8v163.5H712l32.8-93.5h159.9l32.8,93.5h83.3L870.8,96.9H781.9z M770.3,340l54.4-154.7
            L879.1,340H770.3z'
          />
        </clipPath>
      </defs>

      {/* Rectangle background with cutout letter A */}
      <path
        d='M668.7,5.1h374.5c60.3,0,109.2,48.9,109.2,109.2v374.5c0,60.3-48.9,109.2-109.2,109.2H668.7c-60.3,0-109.2-48.9-109.2-109.2
        V114.3C559.5,54,608.4,5.1,668.7,5.1z'
        fill={color}
        clipPath={`url(#letterAClip-${clipId})`}
      />
    </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 AttributionLogo;