import React from 'react';

const HelpPolygon = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
  <svg
    width={width}
    height={width}
    viewBox={viewBox}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.4215 3.36031C11.7077 2.59865 13.2923 2.59865 14.5785 3.36031L19.4215 6.22839C20.7077 6.99005 21.5 8.39766 21.5 9.92099V15.6571C21.5 17.1805 20.7077 18.5881 19.4215 19.3497L14.5785 22.2178C13.2923 22.9795 11.7077 22.9795 10.4215 22.2178L5.57846 19.3497C4.2923 18.5881 3.5 17.1805 3.5 15.6571V9.92099C3.5 8.39766 4.2923 6.99005 5.57846 6.22839L10.4215 3.36031ZM12.5 8.53906C11.8096 8.53906 11.25 9.09871 11.25 9.78906C11.25 10.2033 10.9142 10.5391 10.5 10.5391C10.0858 10.5391 9.75 10.2033 9.75 9.78906C9.75 8.27028 10.9812 7.03906 12.5 7.03906C14.0188 7.03906 15.25 8.27028 15.25 9.78906C15.25 10.3354 15.0899 10.8466 14.8138 11.2757C14.6409 11.5444 14.4387 11.801 14.2523 12.0327L14.1518 12.1573C13.9971 12.3488 13.8551 12.5245 13.7239 12.7048C13.4003 13.1496 13.25 13.4838 13.25 13.7891V14.2891C13.25 14.7033 12.9142 15.0391 12.5 15.0391C12.0858 15.0391 11.75 14.7033 11.75 14.2891V13.7891C11.75 12.9898 12.1424 12.3288 12.511 11.8223C12.6667 11.6083 12.8373 11.3972 12.9925 11.2053L13.0836 11.0924C13.2688 10.8622 13.4265 10.6597 13.5524 10.464C13.6774 10.2697 13.75 10.039 13.75 9.78906C13.75 9.09871 13.1904 8.53906 12.5 8.53906ZM13.25 16.7891C13.25 16.3748 12.9142 16.0391 12.5 16.0391C12.0858 16.0391 11.75 16.3748 11.75 16.7891V17.7891C11.75 18.2033 12.0858 18.5391 12.5 18.5391C12.9142 18.5391 13.25 18.2033 13.25 17.7891V16.7891Z"
      fill={fill}
    />
  </svg>
);

export default HelpPolygon;
