// @flow
import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue } from '../../styles/variables';

type Props = {
    className?: string,
    color?: string,
    height?: number,
    /** A text-only string describing the icon if it is not purely decorative for accessibility */
    title?: string,
    width?: number,
};

const IconTask = ({ className = '', color = bdlBoxBlue, height = 16, title, width = 18 }: Props) => (
    <AccessibleSVG className={className} height={height} title={title} viewBox="0 0 16 18" width={width}>
        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
            <g className="fill-color" fill={color} fillRule="nonzero" transform="translate(0, 0)">
                <g transform="translate(0, 0)">
                    <path d="M3,0 L3,1 C3,2.65685425 4.11928813,4 5.5,4 L10.5,4 C11.8807119,4 13,2.65685425 13,1 L13,0 L14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,16 C16,17.1045695 15.1045695,18 14,18 L2,18 C0.8954305,18 1.3527075e-16,17.1045695 0,16 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L3,0 Z M10.2704628,7.31605887 L7.1865095,10.605609 L5.66436384,9.25259068 C5.25158107,8.88567266 4.6195087,8.92285339 4.25259068,9.33563616 C3.88567266,9.74841893 3.92285339,10.3804913 4.33563616,10.7474093 L6.58563616,12.7474093 C6.99070253,13.1074683 7.60886809,13.0793215 7.9795372,12.6839411 L11.7295372,8.68394113 C12.1072675,8.28102886 12.0868534,7.64819305 11.6839411,7.2704628 C11.2810289,6.89273254 10.6481931,6.9131466 10.2704628,7.31605887 Z M4.66666667,0 L11.3333333,0 L11.3333333,1 C11.3333333,1.55228475 10.9602373,2 10.5,2 L5.5,2 C5.03976271,2 4.66666667,1.55228475 4.66666667,1 L4.66666667,0 Z" />
                </g>
            </g>
        </g>
    </AccessibleSVG>
);

export default IconTask;