import React from 'react';

const Interactive = ({ 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
      d="M14.6699 21.2614L12.0573 13.4235C11.7758 12.5792 12.5792 11.7758 13.4235 12.0573L21.2614 14.6699C22.2462 14.9982 22.2462 16.3911 21.2614 16.7193L18.3672 17.6841C18.0447 17.7916 17.7916 18.0447 17.6841 18.3672L16.7193 21.2614C16.3911 22.2462 14.9982 22.2462 14.6699 21.2614Z"
      fill={fill}
    />
    <path
      opacity="0.4"
      fillRule="evenodd"
      clipRule="evenodd"
      d="M12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 13.7835 8.84882 15.3122 10.4092 15.9425C10.7933 16.0976 10.9789 16.5347 10.8237 16.9188C10.6686 17.3029 10.2315 17.4884 9.84739 17.3333C7.7395 16.4818 6.25 14.4157 6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C14.4157 6.25 16.4818 7.7395 17.3333 9.84739C17.4884 10.2315 17.3029 10.6686 16.9188 10.8237C16.5347 10.9789 16.0976 10.7933 15.9425 10.4092C15.3122 8.84882 13.7835 7.75 12 7.75Z"
      fill={fill}
    />
    <path
      opacity="0.4"
      fillRule="evenodd"
      clipRule="evenodd"
      d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.0825 6.84923 21.2077 11.9218 21.2497C12.336 21.2531 12.669 21.5917 12.6655 22.0059C12.6621 22.4201 12.3236 22.7531 11.9094 22.7496C6.01395 22.7009 1.25 17.9068 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9068 1.25 22.7009 6.01395 22.7496 11.9094C22.7531 12.3236 22.4201 12.6621 22.0059 12.6655C21.5917 12.669 21.2531 12.336 21.2497 11.9218C21.2077 6.84923 17.0825 2.75 12 2.75Z"
      fill={fill}
    />
  </svg>
);

export default Interactive;
