import styled from 'styled-components';
import React from 'react';

const Wrapper = styled.div`
  position: relative;
`;

export const BellIcon = ({
  width = 24,
  height = 24,
  color = '#fff',
  notificationCount = 0,
}) => (
  <Wrapper>
    <svg
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M18.0013 10.75V15.75L19.2913 17.04C19.9213 17.67 19.4713 18.75 18.5813 18.75H5.41127C4.52127 18.75 4.08127 17.67 4.71127 17.04L6.00127 15.75V10.75C6.00127 7.67 7.63127 5.11 10.5013 4.43V3.75C10.5013 2.92 11.1713 2.25 12.0013 2.25C12.8313 2.25 13.5013 2.92 13.5013 3.75V4.43C16.3613 5.11 18.0013 7.68 18.0013 10.75ZM14.0012 19.75C14.0012 20.85 13.1012 21.75 12.0012 21.75C10.8912 21.75 10.0012 20.85 10.0012 19.75H14.0012Z"
        fill={color}
      />

      {Boolean(notificationCount) && (
        <circle
          cx="17"
          cy="6"
          r="4"
          fill="#E7F765"
          stroke="#0A0A0B"
          strokeWidth="1.5"
        />
      )}
    </svg>
  </Wrapper>
);