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

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

const SandboxesInterstitialState = ({
    className = '',
    height = 140,
    primaryColor = bdlBoxBlue,
    secondaryColor = bdlBoxBlue10,
    title,
    width = 140,
}: Props) => (
    <AccessibleSVG
        className={classNames('bdl-SandboxesInterstitialState', className)}
        height={height}
        title={title}
        viewBox="0 0 140 140"
        width={width}
    >
        <path d="M13 122.5s29 1.5 57 1.5 34-4 46-4 12 4 12 4l-1 5H14z" fill={secondaryColor} />
        <path
            d="M134.83 32H89a1 1 0 0 1-1-1 1 1 0 0 1 1-1h29.83a4.12 4.12 0 0 0 4.17-3.61 4 4 0 0 0-4-4.39H23.17A4.12 4.12 0 0 0 19 25.61 4 4 0 0 0 23 30h55a1 1 0 0 1 1 1 1 1 0 0 1-1 1H39.17A4.12 4.12 0 0 0 35 35.61 4 4 0 0 0 39 40h15a2 2 0 0 1 2 2 2 2 0 0 1-2 2H5.17A4.12 4.12 0 0 0 1 47.61 4 4 0 0 0 5 52h94.83a4.12 4.12 0 0 0 4.17-3.61 4 4 0 0 0-4-4.39H72a2 2 0 0 1-2-2 2 2 0 0 1 2-2h63a4 4 0 0 0 4-4.39 4.12 4.12 0 0 0-4.17-3.61z"
            fill={secondaryColor}
            fillRule="evenodd"
        />
        <path
            d="M110.86000000000001 80l17.64 30h-117l17.64-30h81.72m.57-2H28.57a1 1 0 0 0-.86.49L8 112h124l-19.71-33.51a1 1 0 0 0-.86-.49z"
            fill={primaryColor}
        />
        <path
            d="M78.09 86.78C63 83.24 58.18 67.48 39.36 77.19c-11.44 5.9-16 19-22.36 29.81h106"
            fill="#fff"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <path
            fill="none"
            stroke={primaryColor}
            strokeLinecap="square"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M9 113v3h122v-3"
        />
        <path
            fill="none"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M128 116l-1 13H14l-1-13"
        />
        <path
            d="M73.51 59.52v-.41a.32.32 0 0 1 .63 0v.41a.63.63 0 0 1 .23.23h.4a.31.31 0 0 1 .31.31.31.31 0 0 1-.31.32h-.4a.84.84 0 0 1-.23.23V61a.32.32 0 0 1-.63 0v-.39a.63.63 0 0 1-.23-.23h-.41a.32.32 0 0 1-.31-.32.31.31 0 0 1 .31-.31h.41a.51.51 0 0 1 .23-.23zM93.51 5.52v-.41a.32.32 0 0 1 .63 0v.41a.63.63 0 0 1 .23.23h.4a.31.31 0 0 1 .31.31.31.31 0 0 1-.31.32h-.4a.84.84 0 0 1-.23.23V7a.32.32 0 1 1-.63 0v-.39a.63.63 0 0 1-.23-.23h-.41a.32.32 0 0 1-.31-.32.31.31 0 0 1 .31-.31h.41a.51.51 0 0 1 .23-.23zM128.51 75.52v-.41a.32.32 0 0 1 .63 0v.41a.63.63 0 0 1 .23.23h.4a.31.31 0 0 1 .31.31.31.31 0 0 1-.31.32h-.4a.84.84 0 0 1-.23.23V77a.32.32 0 1 1-.63 0v-.39a.63.63 0 0 1-.23-.23h-.41a.32.32 0 0 1-.31-.32.31.31 0 0 1 .31-.31h.41a.51.51 0 0 1 .23-.23zM17.51 10.52v-.41a.32.32 0 0 1 .63 0v.41a.63.63 0 0 1 .23.23h.4a.31.31 0 0 1 .31.31.31.31 0 0 1-.31.32h-.4a.84.84 0 0 1-.23.23V12a.32.32 0 0 1-.63 0v-.39a.63.63 0 0 1-.23-.23h-.41a.32.32 0 0 1-.31-.32.31.31 0 0 1 .31-.31h.41a.51.51 0 0 1 .23-.23zM9.29 68v-.4a.32.32 0 0 1 .32-.31.31.31 0 0 1 .31.31v.4a.63.63 0 0 1 .23.23h.41a.32.32 0 0 1 .31.32.31.31 0 0 1-.31.31h-.41a.51.51 0 0 1-.23.23v.41a.31.31 0 0 1-.31.31.32.32 0 0 1-.32-.32v-.4a.63.63 0 0 1-.23-.23h-.4a.32.32 0 0 1 0-.63h.4a.84.84 0 0 1 .23-.23zM33.93 56.82v-.65a.51.51 0 0 1 1 0v.65a1 1 0 0 1 .37.36h.7a.51.51 0 0 1 .5.51.5.5 0 0 1-.5.5h-.64a1.09 1.09 0 0 1-.37.37v.65a.51.51 0 0 1-1 0v-.63a1.09 1.09 0 0 1-.37-.37h-.65a.51.51 0 0 1 0-1h.65a1 1 0 0 1 .31-.39zM6.29 21v-.4a.32.32 0 0 1 .32-.31.31.31 0 0 1 .31.31v.4a.63.63 0 0 1 .23.23h.41a.32.32 0 0 1 .31.32.31.31 0 0 1-.31.31h-.41a.51.51 0 0 1-.23.23v.41a.31.31 0 0 1-.31.31.32.32 0 0 1-.32-.32v-.4a.63.63 0 0 1-.23-.23h-.4a.32.32 0 0 1 0-.63h.4a.84.84 0 0 1 .23-.23zM131.39 16.28v-.65a.51.51 0 0 1 .51-.49.49.49 0 0 1 .5.49v.65a1 1 0 0 1 .37.37h.65a.5.5 0 0 1 .49.5.49.49 0 0 1-.49.5h-.65a1 1 0 0 1-.37.37v.65a.5.5 0 0 1-.5.49.51.51 0 0 1-.51-.5V18a1 1 0 0 1-.37-.37h-.64a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h.62a1 1 0 0 1 .39-.35zM114.71 52.13v-.63a.5.5 0 0 1 .5-.5.49.49 0 0 1 .5.49v.65a1 1 0 0 1 .37.36h.64a.51.51 0 0 1 0 1h-.64a1 1 0 0 1-.37.37v.65a.5.5 0 1 1-1 0v-.64a1 1 0 0 1-.38-.37h-.65a.51.51 0 0 1-.49-.51.49.49 0 0 1 .49-.5h.66a1 1 0 0 1 .37-.37zM61.67 15.14v-.64a.51.51 0 0 1 1 0v.65a1 1 0 0 1 .36.37h.65a.51.51 0 0 1 0 1H63a1 1 0 0 1-.36.37v.64a.51.51 0 0 1-.51.5.5.5 0 0 1-.5-.51v-.63a1.09 1.09 0 0 1-.37-.37h-.65a.51.51 0 0 1-.49-.51.49.49 0 0 1 .49-.5h.65a1.09 1.09 0 0 1 .41-.37z"
            fill={primaryColor}
            fillRule="evenodd"
        />
        <path
            d="M106 75l-2.4 22.5c0 1.66-4.29 3-9.6 3s-9.6-1.34-9.6-3L82 75"
            fill="#fff"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <path
            d="M85.93 82.38c4 8.1 24.93 15.06 19.13 1.32"
            fill="none"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <ellipse
            cx="94"
            cy="74.5"
            rx="12"
            ry="3.5"
            fill="#fff"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <path d="M53.09 79.55a39.05 39.05 0 0 0 0 11.73L56 90z" fill={secondaryColor} />
        <path
            d="M44.92 94.89L43 85.08l-.32-1.67a2 2 0 0 1 .88-2.08 12.46 12.46 0 0 1 9.28-1.83 2 2 0 0 1 1.61 1.59l.33 1.66L56 90M48 79.5l-2.03-10.3M46 69.2l-4.11-5.3a1 1 0 0 1 .6-1.6l4.13-.81a1 1 0 0 1 1.16 1.25zM43.46 95.84s-1.84-7.12-.84-13.12"
            fill="none"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <path
            d="M34 99c9.11-.79 16.85-7.89 25-8.67 10.51-1 12.69 4.59 21 6.67"
            fill="none"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
        <path
            d="M123 107l-14-24"
            fill="#fff"
            stroke={primaryColor}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
        />
    </AccessibleSVG>
);

export default SandboxesInterstitialState;