import React from 'react';

const Compass = ({ 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="M12.5 2.03906C12.9142 2.03907 13.25 2.37485 13.25 2.78907L13.25 4.89825C14.608 5.22492 15.6149 6.41853 15.6149 7.841C15.6149 8.40824 15.4548 8.93908 15.1761 9.39307C14.6393 10.2677 13.6626 10.8571 12.5432 10.8719L12.5001 10.8722L12.4568 10.8719C11.3375 10.8571 10.3607 10.2677 9.82396 9.39301C9.54535 8.93904 9.38525 8.40821 9.38525 7.841C9.38525 6.41857 10.3921 5.22497 11.75 4.89828L11.75 2.78906C11.75 2.37484 12.0858 2.03906 12.5 2.03906ZM8.99558 10.7893L6.4743 15.0391H3.5C3.08579 15.0391 2.75 15.3748 2.75 15.7891C2.75 16.2033 3.08579 16.5391 3.5 16.5391H5.58438L4.05641 19.1145C3.60711 19.8719 3.42234 20.7506 3.52982 21.6188L3.5939 22.1364C3.63453 22.4645 3.97674 22.6635 4.28204 22.5366L4.78866 22.326C5.61503 21.9825 6.30461 21.3874 6.75391 20.6301L9.18105 16.5391H15.819L18.2461 20.6301C18.6954 21.3874 19.385 21.9825 20.2113 22.326L20.718 22.5366C21.0233 22.6635 21.3655 22.4645 21.4061 22.1364L21.4702 21.6188C21.5777 20.7506 21.3929 19.8719 20.9436 19.1145L19.4156 16.5391H21.5C21.9142 16.5391 22.25 16.2033 22.25 15.7891C22.25 15.3748 21.9142 15.0391 21.5 15.0391H18.5257L16.0045 10.7894C15.3218 11.5711 14.3748 12.1181 13.3059 12.3032L14.929 15.0391H10.071L11.6941 12.3032C10.6252 12.1181 9.67823 11.571 8.99558 10.7893Z"
      fill={fill}
    />
  </svg>
);

export default Compass;
