import * as React from 'react';

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

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

const IconEyeHidden = ({ className = '', color = bdlGray, height = 32, title, width = 32 }: Icon) => (
    <AccessibleSVG
        className={`bdl-IconEyeHidden ${className}`}
        height={height}
        title={title}
        viewBox="0 0 32 32"
        width={width}
    >
        <path
            className="fill-color"
            d="M17.387 12.248A4.024 4.024 0 0 0 16.003 12a4.02 4.02 0 0 0-2.838 1.175A3.979 3.979 0 0 0 12 16.01c-.001.476.083.943.245 1.381l5.142-5.142zm-6.648 6.648A5.96 5.96 0 0 1 10 16.003a5.971 5.971 0 0 1 1.75-4.242A6.02 6.02 0 0 1 16.004 10c1.02.001 2.013.26 2.89.742L20.7 8.936A12.346 12.346 0 0 0 16.002 8c-5.094 0-9.777 3.219-11.845 7.998a13.478 13.478 0 0 0 4.147 5.333l2.435-2.435zM6.88 22.755a15.523 15.523 0 0 1-4.756-6.442L2 16l.123-.313C4.348 10.03 9.815 6 16.002 6c2.2 0 4.309.51 6.213 1.42l4.44-4.44 1.415 1.413L4.028 28.435l-1.414-1.414 4.266-4.266zm14.663-9.063c.302.724.46 1.508.457 2.307a5.969 5.969 0 0 1-1.75 4.24 6.018 6.018 0 0 1-6.555 1.301l1.602-1.602a4.011 4.011 0 0 0 3.539-1.113A3.977 3.977 0 0 0 20 15.992c0-.235-.02-.469-.06-.697l1.603-1.603zm4.053-4.053a15.52 15.52 0 0 1 4.282 6.05L30 16l-.122.313C27.655 21.972 22.188 26 16.002 26c-1.973 0-3.872-.41-5.617-1.15l1.547-1.547a12.3 12.3 0 0 0 4.07.697c5.095 0 9.777-3.219 11.841-8a13.48 13.48 0 0 0-3.665-4.943l1.418-1.418z"
            fill={color}
            fillRule="nonzero"
        />
    </AccessibleSVG>
);

export default IconEyeHidden;
