import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { white } from '../../styles/variables';
import { Icon } from '../iconTypes';

interface IconBell2Props extends Icon {
    /** A boolean indicating whether this icon is filled or just outlined */
    isFilled?: boolean;
}

const IconBell2 = ({
    className = '',
    color = white,
    isFilled = false,
    height = 18,
    title,
    width = 18,
}: IconBell2Props) => (
    <AccessibleSVG
        className={`icon-bell-2 ${className}`}
        title={title}
        width={width}
        height={height}
        viewBox="0 0 18 18"
    >
        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <path
                d="M9.41464715,16.5 L6.58535285,16.5 C6.79127106,17.0825962 7.34689059,17.5 8,17.5 C8.65310941,17.5 9.20872894,17.0825962 9.41464715,16.5 Z M0.5,14.5 L15.5,14.5 L15.5,14.0046997 C15.5,13.8733992 15.4473922,13.6340309 15.291882,13.398171 C15.1728517,13.2176395 15.0067082,13.0679879 14.7737982,12.9531918 L14.6667807,12.8989034 C14.0028928,12.5621229 13.5,11.7419044 13.5,10.9906311 L13.5,8 C13.5,4.89865954 12.1772561,3.03042465 9.88715663,2.48646538 L9.50270503,2.39514795 L9.50270503,2 C9.50270503,1.17726332 8.82497923,0.5 8.00342974,0.5 C7.18077307,0.5 6.5,1.17836622 6.5,2 L6.5,2.40700549 L6.10146256,2.48959713 C3.65098807,2.99742572 2.5,4.72245944 2.5,8 L2.5,10.9906311 C2.5,11.7342689 1.99034639,12.5638438 1.33333313,12.8923504 L1.2272329,12.9454001 C1.00044577,13.0591697 0.834016979,13.2089567 0.714171653,13.3883298 C0.554039261,13.6280007 0.5,13.8706432 0.5,14.0038757 L0.5,14.5 Z"
                stroke={color}
                fill={isFilled ? color : 'none'}
                transform="translate(1 0)"
            />
        </g>
    </AccessibleSVG>
);

export default IconBell2;