import React from 'react';

const NotificationRinging = ({ 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="M15.8036 3.22166C15.9574 2.83707 16.3939 2.65001 16.7785 2.80384L16.9457 2.87073C18.6247 3.54231 19.964 4.85947 20.6634 6.527L20.7402 6.71009C20.9004 7.09207 20.7207 7.5316 20.3387 7.69182C19.9567 7.85204 19.5172 7.67228 19.357 7.29031L19.2802 7.10721C18.7362 5.81024 17.6945 4.78579 16.3886 4.26345L16.2214 4.19656C15.8368 4.04272 15.6498 3.60624 15.8036 3.22166Z"
      fill={fill}
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.24499 3.22166C8.09115 2.83707 7.65467 2.65001 7.27009 2.80384L7.10286 2.87073C5.42391 3.54231 4.08462 4.85947 3.38516 6.527L3.30836 6.71009C3.14814 7.09207 3.32791 7.5316 3.70988 7.69182C4.09185 7.85204 4.53138 7.67228 4.6916 7.29031L4.7684 7.10721C5.31243 5.81024 6.3541 4.78579 7.65995 4.26345L7.82717 4.19656C8.21176 4.04272 8.39882 3.60624 8.24499 3.22166Z"
      fill={fill}
    />
    <path d="M12 21C13.385 21 14.5633 20.1652 15 19H9C9.43668 20.1652 10.615 21 12 21Z" fill={fill} />
    <path
      opacity="0.4"
      d="M6.22281 19H17.7772C19.6056 19 20.6492 17.1609 19.5522 15.8721C19.0666 15.3016 18.7673 14.6249 18.6867 13.9153L18.2395 9.97519C17.9984 7.85063 16.4123 6.10719 14.2699 5.37366V5.26995C14.2699 4.01629 13.2537 3 12 3C10.7463 3 9.73005 4.01629 9.73005 5.26995V5.37366C7.58766 6.10719 6.0016 7.85063 5.76046 9.97519L5.31328 13.9153C5.23274 14.6249 4.93344 15.3016 4.44779 15.8721C3.35076 17.1609 4.39443 19 6.22281 19Z"
      fill={fill}
    />
  </svg>
);

export default NotificationRinging;
