// @flow
import * as React from 'react';
import { white } from '../../styles/variables';

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

import type { Icon } from '../flowTypes';

const IconRegionAnnotation = ({ className = '', color = white, height = 21, title, width = 22 }: Icon) => (
    <AccessibleSVG
        className={`bdl-IconRegionAnnotation ${className}`}
        height={height}
        title={title}
        viewBox="0 0 22 21"
        width={width}
    >
        <path
            d="m7.5815 7c2.3901 0 4.4185 1.9375 4.4185 4.3276 0 2.3901-2.0285 4.3276-4.4185 4.3276h-1.1269l-2.4545 1.3447c-0.27724 0.11784-0.8387-0.0093928-0.95654-0.28664-0.02868-0.067478-0.043462-0.14004-0.043462-0.21336l-0.0012948-1.7378c-0.99636-0.79285-1.9987-2.0623-1.9987-3.4346 0-2.3901 1.9375-4.3276 4.3276-4.3276h2.2538zm-1.1283 2.2727c-0.19331 0-0.3544 0.15893-0.3544 0.34435v1.5761h-1.5653c-0.18257 0-0.35172 0.16158-0.35172 0.3523 0 0.19337 0.16915 0.3523 0.35172 0.3523h1.5653v1.5761c0 0.18012 0.16109 0.34435 0.3544 0.34435 0.19599 0 0.35709-0.16423 0.35709-0.34435v-1.5761h1.5653c0.18794 0 0.35172-0.15893 0.35172-0.3523 0-0.19072-0.16378-0.3523-0.35172-0.3523h-1.5653v-1.5761c0-0.18542-0.16109-0.34435-0.35709-0.34435zm7.7968-7.0227c1.4625 0 2.6584 1.1417 2.745 2.5825l0.0050188 0.16752v4c0 1.4625-1.1417 2.6584-2.5825 2.745l-0.16752 0.0050188h-0.75c-0.41421 0-0.75-0.33579-0.75-0.75 0-0.3797 0.28215-0.69349 0.64823-0.74315l0.10177-0.0068466h0.75c0.64721 0 1.1795-0.49187 1.2435-1.1222l0.0064536-0.12781v-4c0-0.64721-0.49187-1.1795-1.1222-1.2435l-0.12781-0.0064536h-7.25c-0.64721 0-1.1795 0.49187-1.2435 1.1222l-0.0064536 0.12781v0.25c0 0.41421-0.33579 0.75-0.75 0.75-0.3797 0-0.69349-0.28215-0.74315-0.64823l-0.0068466-0.10177v-0.25c0-1.4625 1.1417-2.6584 2.5825-2.745l0.16752-0.0050188h7.25z"
            fillRule="nonzero"
            fill={color}
        />
    </AccessibleSVG>
);

export default IconRegionAnnotation;