// @flow
import * as React from 'react';
import classNames from 'classnames';
import AccessibleSVG from '../accessible-svg';
import { bdlGray40 } from '../../styles/variables';

type Props = {
    className?: string,
    color?: string,
    height?: number,
    title?: string | React.Element<any>,
    width?: number,
};

const IconPuzzlePiece = ({ className = '', color = bdlGray40, height = 32, title, width = 32 }: Props) => (
    <AccessibleSVG
        className={classNames('bdl-IconPuzzlePiece', className)}
        height={height}
        title={title}
        viewBox="0 0 14 14"
        width={width}
    >
        <path
            d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
            fill={color}
        />
    </AccessibleSVG>
);

export default IconPuzzlePiece;