import * as React from 'react';

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

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

const RecentsEmptyState = ({ className = '', color = bdlBoxBlue, height = 150, title, width = 150 }: Icon) => (
    <AccessibleSVG
        className={`recents-empty-state ${className}`}
        height={height}
        title={title}
        viewBox="0 0 150 150"
        width={width}
    >
        <g fill="none" fillRule="evenodd">
            <path
                className="stroke-color"
                d="M37.004 35.82c-.144-.82.394-1.598 1.218-1.744L60.72 30.11c.817-.145 2.01.158 2.658.67l7.258 5.73c.65.514 1.296 1.592 1.438 2.398l5.882 33.36c.143.81-.41 1.584-1.223 1.728l-30.52 5.38c-.818.145-1.598-.396-1.743-1.22L37.004 35.82z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M10.53 66.884c-.416-.72-.177-1.635.548-2.053L30.863 53.41c.718-.415 1.942-.54 2.726-.28l8.78 2.903c.787.26 1.76 1.054 2.17 1.763l16.937 29.335c.412.713.157 1.63-.558 2.043l-26.84 15.496c-.72.416-1.636.174-2.055-.55L10.53 66.884z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M43.464 56.464l-5.81 3.354c-.617.357-1.41.143-1.764-.473l-3.354-5.81"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="fill-color"
                d="M24.962 77.63c-.276-.48-.106-1.095.36-1.363l15.602-9.008c.474-.275 1.08-.113 1.36.37.275.477.104 1.093-.36 1.36L26.32 78c-.473.273-1.08.11-1.358-.37zm2.5 4.33c-.276-.48-.106-1.095.36-1.363l15.602-9.008c.474-.275 1.08-.112 1.36.37.275.477.104 1.093-.36 1.36L28.82 82.33c-.473.273-1.08.11-1.358-.37zm2.5 4.33c-.276-.48-.105-1.095.368-1.368l8.656-4.998c.48-.276 1.09-.116 1.368.365.277.478.106 1.093-.368 1.367l-8.656 4.997c-.48.277-1.09.117-1.368-.365zm11.778-6.8c-.276-.48-.116-1.088.374-1.37l1.716-.992c.483-.28 1.096-.12 1.374.36.276.48.116 1.09-.374 1.372l-1.716.99c-.483.28-1.096.12-1.374-.36z"
                fill={color}
            />
            <path
                className="stroke-color"
                d="M71.037 37.35l-6.606 1.165c-.702.124-1.373-.348-1.496-1.048L61.77 30.86"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M76.47 30.915c.144-.82.916-1.366 1.74-1.22l22.498 3.966c.817.145 1.834.837 2.268 1.54l4.86 7.867c.437.705.674 1.94.53 2.745l-5.88 33.36c-.143.81-.928 1.348-1.74 1.205l-30.52-5.38c-.82-.146-1.367-.92-1.222-1.744l7.466-42.338z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M108.185 44.762l-6.144-1.187c-.7-.124-1.17-.797-1.047-1.497l1.165-6.606"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <ellipse className="stroke-color" cx="89.579" cy="51.639" rx="9" ry="9" stroke={color} strokeWidth="1.6" />
            <path
                className="stroke-color"
                d="M110.025 51.884c.416-.72 1.328-.97 2.053-.552l19.785 11.423c.718.415 1.437 1.413 1.605 2.222l1.876 9.054c.17.814-.03 2.054-.44 2.763l-16.936 29.335c-.412.713-1.334.95-2.05.538L89.082 91.17c-.72-.415-.968-1.33-.55-2.054l21.495-37.232z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M134.867 74.57l-5.81-3.354c-.617-.357-.828-1.15-.472-1.765l3.354-5.808"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <g className="stroke-color" fill="#FFF" stroke={color} strokeWidth="1.6">
                <path d="M109.84 67.938l3.948 2.28-2.334 4.04-3.948-2.278zM107.506 71.98l3.948 2.28-2.333 4.04-3.947-2.28z" />
                <path d="M105.173 76.02l3.948 2.28-2.332 4.042-3.948-2.28zM113.788 70.217l12.596 7.273-2.333 4.042-12.596-7.273zM111.454 74.26l12.597 7.272-2.333 4.04-12.596-7.27z" />
                <path d="M109.12 78.3l12.598 7.272-2.334 4.042-12.596-7.272z" />
            </g>
            <path
                className="fill-color stroke-color"
                d="M59.465 52.134l-6.356-6.65-4.254 9.684 10.79-1.902 6.937-1.223-4.826-4.836-2.292 4.927zm.65-7.48c.425-.075.708-.49.63-.924-.075-.435-.483-.727-.908-.652-.426.075-.71.49-.632.924.077.435.484.727.91.652zm32.345 7.358L88 54.272l1.042-5.91 3.418 3.65z"
                fill={color}
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <circle className="stroke-color" cx="75" cy="89" fill="#FFF" r="26" stroke={color} strokeWidth="1.857" />
            <path
                className="fill-color"
                d="M74.915 113c11 0 20.268-7.455 23.057-17.606.56-2.035-7.328 11.676-15.665 7.633-6.228-3.02-8.427-9.183-13.35-6.69-4.922 2.493-8.24 5.3-17.957-7.337 0 13.255 10.707 24 23.915 24z"
                fill={color}
                fillOpacity=".1"
            />
            <path
                className="fill-color"
                d="M80.545 6.142v-.647c0-.273-.234-.495-.504-.495-.277 0-.502.217-.502.494v.648c-.153.088-.28.216-.37.37h-.647c-.272 0-.493.232-.493.502 0 .278.217.504.494.504h.65c.087.153.215.28.368.37v.646c0 .273.233.494.503.494.28 0 .505-.232.505-.508v-.633c.153-.09.28-.216.37-.37h.647c.272 0 .493-.233.493-.503 0-.278-.216-.503-.493-.503h-.648c-.09-.152-.216-.28-.37-.368zm62.944 84.094v-.647c0-.274-.234-.496-.504-.496-.278 0-.504.216-.504.494v.648c-.153.088-.28.216-.37.37h-.646c-.273 0-.494.232-.494.502 0 .278.216.504.494.504h.647c.09.153.216.28.37.368v.648c0 .273.233.494.503.494.278 0 .503-.232.503-.508v-.634c.152-.088.28-.215.368-.368h.648c.273 0 .494-.234.494-.504 0-.278-.217-.503-.494-.503h-.648c-.088-.153-.216-.28-.37-.37zM7.517 85.2v-.646c0-.274-.234-.496-.504-.496-.278 0-.503.217-.503.494v.648c-.152.09-.28.216-.368.37h-.648c-.273 0-.494.233-.494.503 0 .278.217.503.494.503h.648c.088.153.216.28.37.37v.647c0 .273.232.494.502.494.278 0 .504-.233.504-.51v-.632c.153-.09.28-.216.37-.37h.646c.273 0 .494-.232.494-.502 0-.28-.216-.504-.494-.504h-.647c-.09-.154-.216-.28-.37-.37zM54.82 10.277V9.63c0-.273-.233-.495-.503-.495-.278 0-.503.217-.503.494v.647c-.153.088-.28.216-.37.37h-.647c-.273 0-.494.232-.494.502 0 .277.217.503.494.503h.648c.088.153.216.28.37.37v.647c0 .272.232.494.502.494.278 0 .504-.233.504-.51v-.632c.154-.09.28-.216.37-.37h.647c.273 0 .494-.233.494-.503 0-.28-.215-.504-.493-.504h-.647c-.09-.153-.216-.28-.37-.37zm71.463 14.54v-.647c0-.274-.234-.496-.503-.496-.28 0-.504.217-.504.494v.648c-.153.09-.28.216-.37.37h-.647c-.274 0-.495.233-.495.502 0 .28.217.504.494.504h.647c.09.153.216.28.37.37v.647c0 .272.233.493.503.493.278 0 .503-.233.503-.51v-.632c.153-.088.28-.215.37-.368h.647c.273 0 .494-.234.494-.504 0-.278-.217-.503-.494-.503h-.648c-.09-.153-.216-.28-.37-.37zm-111.2 21.177v-.647c0-.273-.234-.495-.504-.495-.28 0-.505.217-.505.494v.648c-.153.088-.28.216-.368.37h-.648c-.274 0-.495.232-.495.502 0 .278.216.504.494.504h.647c.088.153.215.28.368.37v.647c0 .272.234.494.504.494.277 0 .503-.232.503-.508v-.633c.152-.09.28-.217.368-.37h.65c.272 0 .493-.234.493-.504 0-.278-.216-.503-.494-.503h-.65c-.087-.153-.215-.28-.367-.37zm118.838 1.99v-.404c0-.17-.145-.31-.314-.31-.174 0-.315.136-.315.31v.404c-.094.055-.174.135-.23.23h-.404c-.17 0-.31.146-.31.315 0 .173.136.314.31.314h.405c.056.095.136.175.23.23v.405c0 .17.147.308.316.308.174 0 .315-.145.315-.318v-.396c.096-.055.176-.135.23-.23h.406c.17 0 .31-.146.31-.315 0-.175-.137-.316-.31-.316h-.405c-.054-.095-.134-.175-.23-.23zm-2.453 51.25v-.405c0-.172-.146-.31-.315-.31-.174 0-.315.135-.315.308v.405c-.095.055-.175.135-.23.23h-.405c-.17 0-.31.146-.31.315 0 .174.137.315.31.315h.405c.055.095.135.175.23.23v.405c0 .17.146.31.315.31.174 0 .315-.146.315-.32v-.395c.095-.055.175-.135.23-.23h.405c.17 0 .31-.146.31-.315 0-.174-.136-.315-.31-.315h-.405c-.055-.095-.135-.175-.23-.23zM23.707 38.515v-.404c0-.17-.147-.31-.316-.31-.173 0-.314.136-.314.31v.404c-.095.055-.175.135-.23.23h-.405c-.17 0-.308.146-.308.315 0 .175.136.316.31.316h.404c.055.095.135.175.23.23v.405c0 .172.146.31.315.31.175 0 .316-.145.316-.318v-.396c.095-.055.175-.135.23-.23h.405c.172 0 .31-.146.31-.315 0-.173-.135-.314-.31-.314h-.404c-.055-.095-.135-.175-.23-.23zM75 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-1-19.993c0-.556.444-1.007 1-1.007.552 0 1 .45 1 1.007v11.986C76 83.55 75.556 84 75 84c-.552 0-1-.45-1-1.007V71.007zM80 89c0-.552.445-1 .993-1h16.014c.548 0 .993.444.993 1 0 .552-.445 1-.993 1H80.993c-.548 0-.993-.444-.993-1z"
                fill={color}
            />
            <ellipse className="fill-color" cx="75" cy="142" fill={color} fillOpacity=".1" rx="32.5" ry="3" />
        </g>
    </AccessibleSVG>
);

export default RecentsEmptyState;
