import { forwardRef, SVGProps } from 'react';

type TopicsLeafProps = SVGProps<SVGSVGElement>;

type TopicsLeafRef = SVGSVGElement;

export const TopicsLeaf = forwardRef<TopicsLeafRef, TopicsLeafProps>((delegated, ref) => {
  return (
    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
      <path d="M3.6 10.9a2.1 2.1 0 0 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#BFF6F8" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5.7 13.6a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
        fill="#528693"
      />
      <path d="M13.2 10.9a2.1 2.1 0 1 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#fff" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M15.3 13.6a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
        fill="#528693"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8 11a.3.3 0 0 1 .3-.3h4.4a.3.3 0 0 1 0 .6H8.3A.3.3 0 0 1 8 11Z"
        fill="#528693"
      />
    </svg>
  );
});

TopicsLeaf.displayName = 'TopicsLeafIcon';
