import type { JSX, SVGProps } from 'react'

interface NotificationIconProperties
  extends JSX.IntrinsicAttributes,
    SVGProps<SVGSVGElement> {
  showBadge?: boolean
}

export const NotificationIcon = ({
  showBadge = false,
  ...properties
}: NotificationIconProperties) => {
  return (
    <svg
      width={16}
      height={19}
      viewBox="0 0 16 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...properties}
    >
      <path
        d="M6.597 18.53a1.616 1.616 0 01-1.608-1.6h3.2c.001.213-.04.425-.12.623-.21.482-.639.833-1.152.944h-.038c-.093.02-.187.03-.282.032zm6.4-2.4H.197v-1.6l1.6-.8v-4.4a6.452 6.452 0 01.739-3.249 3.723 3.723 0 012.46-1.808V2.53h3.2v1.744c2.064.492 3.2 2.287 3.2 5.056v4.4l1.6.8v1.6z"
        fill="currentColor"
      />
      {showBadge && (
        <circle
          cx={11.1968}
          cy={4.306_64}
          r={3.6}
          fill="#EC5252"
          stroke="#fff"
          strokeWidth={1.2}
        />
      )}
    </svg>
  )
}