import * as React from 'react';

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

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

const MultiSelectState = ({ className = '', color = bdlBoxBlue, height = 149, title, width = 180 }: Icon) => (
    <AccessibleSVG
        className={`multi-select-state ${className}`}
        height={height}
        title={title}
        viewBox="0 0 180 140"
        width={width}
    >
        <path
            className="fill-color"
            d="M146.6 91c1.1 0 2 .9 2 2v10.9c0 1.1-.9 2-2 2H33.4c-1.1 0-2-.9-2-2V93c0-1.1.9-2 2-2h113.2m0-4H33.4c-3.3 0-6 2.7-6 6v10.9c0 3.3 2.7 6 6 6h113.2c3.3 0 6-2.7 6-6V93c0-3.3-2.7-6-6-6zM146.6 63.1c1.1 0 2 .9 2 2V76c0 1.1-.9 2-2 2H33.4c-1.1 0-2-.9-2-2V65.1c0-1.1.9-2 2-2h113.2m0-4H33.4c-3.3 0-6 2.7-6 6V76c0 3.3 2.7 6 6 6h113.2c3.3 0 6-2.7 6-6V65.1c0-3.3-2.7-6-6-6zM146.6 35.1c1.1 0 2 .9 2 2V48c0 1.1-.9 2-2 2H33.4c-1.1 0-2-.9-2-2V37.1c0-1.1.9-2 2-2h113.2m0-4H33.4c-3.3 0-6 2.7-6 6V48c0 3.3 2.7 6 6 6h113.2c3.3 0 6-2.7 6-6V37.1c0-3.3-2.7-6-6-6z"
            fill={color}
            opacity=".4"
        />
        <path
            className="fill-color"
            d="M148.7 44.5v3.8c0 1-.9 1.8-2 1.8H33.5c-1.1 0-2-.8-2-1.8v-3.8h117.2zM148.7 72.3v3.8c0 1-.9 1.8-2 1.8H33.5c-1.1 0-2-.8-2-1.8v-3.8h117.2zM148.7 100.4v3.8c0 1-.9 1.8-2 1.8H33.5c-1.1 0-2-.8-2-1.8v-3.8h117.2z"
            fill={color}
            opacity=".05"
        />
        <path
            className="fill-color"
            clipRule="evenodd"
            d="M173.1 102.3l-13.2-7.1v15.1l3.8-4.7 3.1 5.4c.3.5.9.6 1.4.4l1.7-1c.5-.3.6-.9.4-1.4l-3.1-5.3 5.9-1.4z"
            fill={color}
            fillRule="evenodd"
            opacity=".4"
        />
        <path
            className="fill-color"
            d="M168.7 81.1h-1.6v-1.6c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5v1.6h-1.6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.6v1.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.6h1.6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5zM177.2 92.2h-.9v-.9c0-.4-.4-.8-.8-.8s-.8.4-.8.8v.9h-.9c-.4 0-.8.4-.8.8s.4.8.8.8h.9v.9c0 .4.4.8.8.8s.8-.4.8-.8v-.9h.9c.4 0 .8-.4.8-.8.1-.4-.3-.8-.8-.8zM161.5 116.7h-.9v-.9c0-.4-.4-.8-.8-.8s-.8.4-.8.8v.9h-.9c-.4 0-.8.4-.8.8s.4.8.8.8h.9v.9c0 .4.4.8.8.8s.8-.4.8-.8v-.9h.9c.4 0 .8-.4.8-.8s-.4-.8-.8-.8z"
            fill={color}
            opacity=".4"
        />
    </AccessibleSVG>
);

export default MultiSelectState;