import * as React from 'react';

import AccessibleSVG from '../accessible-svg';

import { Icon } from '../iconTypes';

const IconHelp = ({ className = '', color = '#D0E0F7', height = 18, title, width = 18 }: Icon) => (
    <AccessibleSVG className={`icon-help ${className}`} title={title} width={width} height={height} viewBox="0 0 18 18">
        <path
            className="fill-color"
            d="M9 18A9 9 0 1 1 9 0a9 9 0 0 1 0 18zM6.25 5.002l.551.847a.463.463 0 0 0 .43.25c.086 0 .171-.025.256-.075.086-.05.185-.104.3-.165a2.04 2.04 0 0 1 1.005-.239c.31 0 .553.08.73.24.177.159.265.373.265.642 0 .233-.052.433-.158.602-.105.168-.234.32-.386.457a4.635 4.635 0 0 1-.491.383 3.89 3.89 0 0 0-.474.377c-.142.132-.253.28-.333.444a.934.934 0 0 0-.068.575l.148 1.082h1.426l.188-.941a.757.757 0 0 1 .219-.377c.114-.112.249-.225.403-.34.155-.114.319-.238.491-.373.173-.134.331-.293.474-.477.144-.184.263-.4.357-.649.094-.249.141-.544.141-.884 0-.359-.064-.685-.192-.979a2.108 2.108 0 0 0-.548-.753 2.469 2.469 0 0 0-.864-.48A3.615 3.615 0 0 0 8.98 4c-.3 0-.58.026-.837.077a3.937 3.937 0 0 0-.723.216 4.238 4.238 0 0 0-.629.319 4.703 4.703 0 0 0-.541.39zm1.237 7.848a1.14 1.14 0 0 0 .713 1.063c.144.058.3.087.471.087.166 0 .32-.03.464-.087a1.18 1.18 0 0 0 .377-.243 1.14 1.14 0 0 0 .343-.82 1.116 1.116 0 0 0-.343-.814 1.229 1.229 0 0 0-.377-.245 1.181 1.181 0 0 0-.464-.09 1.199 1.199 0 0 0-.844.335 1.139 1.139 0 0 0-.34.814z"
            fill={color}
            fillRule="nonzero"
        />
    </AccessibleSVG>
);

export default IconHelp;