import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue, white } from '../../styles/variables';
import { Icon } from '../iconTypes';

const NoNotificationState = ({
    className = '',
    color = bdlBoxBlue,
    height = 88,
    opacity = 0.5,
    title,
    width = 140,
}: Icon) => (
    <AccessibleSVG
        className={`no-notification-state ${className}`}
        height={height}
        title={title}
        viewBox="0 0 140 88"
        width={width}
    >
        <g fill="none" fillRule="evenodd" opacity={opacity}>
            <path
                className="fill-color"
                d="M25.881 8.453a1.92 1.92 0 0 1 1.909-1.917H61.93c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H27.79a1.912 1.912 0 0 1-1.909-1.917V8.453zm-25.8 0c0-1.059.853-1.917 1.911-1.917h17.936c1.056 0 1.912.857 1.912 1.917v9.549a1.913 1.913 0 0 1-1.912 1.917H1.992a1.914 1.914 0 0 1-1.911-1.917V8.453zm0 33.693c0-1.059.853-1.917 1.911-1.917h17.936c1.056 0 1.912.857 1.912 1.917v9.549a1.913 1.913 0 0 1-1.912 1.917H1.992a1.914 1.914 0 0 1-1.911-1.917v-9.549zM67.189 8.453a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H69.097a1.912 1.912 0 0 1-1.908-1.917V8.453zM26.171 42.146a1.92 1.92 0 0 1 1.909-1.917h34.142c1.054 0 1.908.857 1.908 1.917v9.549a1.92 1.92 0 0 1-1.908 1.917H28.08a1.912 1.912 0 0 1-1.909-1.917v-9.549zm41.018-.234a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H69.097a1.912 1.912 0 0 1-1.908-1.918v-9.548zM4.535 24.982a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H6.443a1.912 1.912 0 0 1-1.908-1.918v-9.548zm42 .2a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.917H48.443a1.912 1.912 0 0 1-1.908-1.917v-9.548zm41.308 0c0-1.058.858-1.917 1.918-1.917h13.469c1.059 0 1.918.858 1.918 1.918v9.548a1.917 1.917 0 0 1-1.918 1.917H89.76a1.917 1.917 0 0 1-1.917-1.917v-9.548zM4.535 58.676a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H6.443a1.912 1.912 0 0 1-1.908-1.918v-9.548zm42-.034a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H48.443a1.912 1.912 0 0 1-1.908-1.917V58.64zm41.308 0c0-1.059.858-1.917 1.918-1.917h13.469c1.059 0 1.918.857 1.918 1.917v9.549a1.917 1.917 0 0 1-1.918 1.917H89.76a1.917 1.917 0 0 1-1.917-1.917V58.64z"
                fill={color}
                fillOpacity=".07"
            />
            <path
                className="fill-color"
                d="M109.595 81.821h20.991a1 1 0 0 1 0 2h-20.99a2.913 2.913 0 0 1-2.914-2.907V7.172a2.91 2.91 0 0 1 2.913-2.908h14.628a1 1 0 1 1 0 2h-14.628a.91.91 0 0 0-.913.908v73.742c0 .498.41.907.913.907zM135.682 6.26h-6.364a1 1 0 1 1 0-2h6.364a1 1 0 1 1 0 2zm-1.273 13.369h-14a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2zm-5.09 11.5h-11.455a1 1 0 0 1 0-2h11.454a1 1 0 1 1 0 2zm9.239 13h-14.389c-.52 0-.942-.448-.942-1 0-.553.422-1 .942-1h14.389c.52 0 .942.447.942 1 0 .552-.422 1-.942 1zm-10.513 12.5h-10.181a1 1 0 0 1 0-2h10.181a1 1 0 0 1 0 2zm8.91 12.5h-15.273a1 1 0 1 1 0-2h15.273a1 1 0 1 1 0 2zm.954 14.691h-2.545a1 1 0 0 1 0-2h2.545a1 1 0 1 1 0 2zM42.6 85.853c-1.255.952-2.378.644-3.421-1.289a.75.75 0 1 1 1.32-.712c.623 1.155.705 1.177 1.196.805.076-.058.1-.077.304-.244.692-.564 1.097-.795 1.724-.795.843 0 1.33.245 1.935.793l.069.062c.282.256.392.32.609.339a.75.75 0 1 1-.128 1.494c-.619-.053-.985-.265-1.489-.722l-.068-.062c-.355-.321-.52-.404-.928-.404-.156 0-.35.11-.776.458-.223.182-.249.203-.346.277zm36.387.057c-1.516.844-2.754.595-4.116-1.258a.75.75 0 1 1 1.209-.888c.908 1.235 1.313 1.317 2.178.836.108-.06.14-.08.423-.249.873-.523 1.376-.733 2.089-.733 1.018 0 1.599.214 2.366.724l.094.063c.435.29.647.38 1.06.405.474.03.926-.156 1.345-.502.245-.203.417-.405.495-.52a.75.75 0 0 1 1.243.84c-.151.224-.413.53-.782.836-.688.569-1.492.9-2.395.843-.724-.045-1.162-.23-1.797-.654l-.094-.062c-.54-.36-.849-.473-1.535-.473-.355 0-.67.131-1.319.52-.3.18-.336.201-.464.272z"
                fill={color}
                fillRule="nonzero"
            />
            <path
                className="stroke-color"
                d="M93.045 86.364a1.908 1.908 0 1 1-.001-3.816 1.908 1.908 0 0 1 .001 3.816zm-59.181 0a1.908 1.908 0 1 1-.002-3.816 1.908 1.908 0 0 1 .002 3.816z"
                fill={white}
                stroke={color}
                strokeWidth="1.5"
            />
            <path
                className="stroke-color"
                d="M73.204 51.003c5.82 29.801-24.11 20.785-24.11 20.785l5.236 7.22M84.152 31.576c7.32 14.279 20.754.53 21.783-1.32 1.03-1.848-.623-4.649-.623-4.649"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M63.217 51.671c-6.703 16.493 1.7 31.006 1.7 31.006l-8.78.86M50.977 28.899C40.187 39.312 52.094 59.3 52.094 59.3"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <ellipse
                className="stroke-color"
                cx="76.864"
                cy="3.906"
                fill={white}
                rx="2.545"
                ry="2.543"
                stroke={color}
                strokeWidth="2"
                transform="rotate(10 76.864 3.906)"
            />
            <path
                className="stroke-color"
                d="M52.247 23.912c.053-.463.121-.928.203-1.394 2.012-11.41 12.06-19.176 22.444-17.345 10.383 1.83 17.17 12.565 15.158 23.975-.049.276-.102.55-.16.822 0 0-1.92 11.415-1.462 15.705.458 4.29 6.343 5.303 5.625 9.37-.717 4.067-4.067 3.785-4.067 3.785l-47.63-8.398s-3.058-.704-2.316-4.911c.741-4.208 6.194-3.128 8.329-6.91 1.85-3.28 3.477-12.348 3.876-14.7z"
                fill={white}
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M82.496 16.562s1.378 1.655 2.419 4.136c1.04 2.48.98 4.47.98 4.47"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="fill-color"
                d="M42.74 46.161c.394-2.237 4.956-1.926 6.622-3.843 4.456 2.35 12.182 1.219 16.672 5.54 4.49 4.32 11.475-1.54 20.727 1.055.683 2.358 5.324 3.72 4.942 5.882-.38 2.162-2.135 1.46-2.135 1.46l-45.61-8.042s-1.612.185-1.218-2.052z"
                fill={color}
                fillOpacity=".07"
            />
        </g>
    </AccessibleSVG>
);

export default NoNotificationState;
