import React from 'react';

interface ArrowIconProps {
  className?: string;
  style?: React.CSSProperties;
  color?: string;
}

const ArrowIcon: React.FC<ArrowIconProps> = ({ className, style, color = '#000000' }) => {
  return (
    <svg 
      width="32" 
      height="32" 
      viewBox="0 0 512 512" 
      preserveAspectRatio="xMidYMid meet"
      className={className}
      style={{
        backgroundColor: 'transparent', // ✅ force it
        pointerEvents: 'none', // prevent interference
        ...style
      }}
    >
      <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
        fill={color}
      >
      <path d="M2440 4470 c-571 -50 -1056 -437 -1229 -982 -101 -318 -89 -651 39
      -1039 127 -387 353 -771 700 -1189 106 -128 477 -506 563 -575 l47 -37 48 38
      c83 67 380 365 494 496 377 434 632 854 768 1267 197 596 118 1108 -236 1533
      -113 135 -313 288 -477 362 -220 100 -482 147 -717 126z m325 -644 c206 -56
      405 -217 500 -405 64 -129 80 -199 80 -361 0 -124 -3 -156 -23 -220 -70 -221
      -209 -387 -407 -486 -123 -61 -222 -84 -355 -84 -355 0 -653 224 -762 570 -20
      64 -23 96 -23 220 0 124 3 156 23 220 90 286 308 488 602 556 74 17 286 11
      365 -10z"/>
      </g>
    </svg>
  );
};

export default ArrowIcon;