const WooImage = ( props ) => (
	<div
		className="wc-block-welcome-guide__image"
		style={ {
			display: 'flex',
			justifyContent: 'center',
			alignItems: 'center',
		} }
		{ ...props }
	>
		<svg
			height="120"
			viewBox="0 0 170 120"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		>
			<g filter="url(#filter0_ddd)">
				<rect
					x="5.5"
					y="18"
					width="159"
					height="96"
					rx="3"
					fill="white"
				/>
				<rect
					x="24.5"
					y="4"
					width="51"
					height="22"
					rx="3"
					fill="white"
				/>
				<rect
					x="94.5"
					y="4"
					width="51"
					height="22"
					rx="3"
					fill="white"
				/>
			</g>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M48.8908 42H125.078C129.899 42 133.802 45.9231 133.802 50.7692V80C133.802 84.8462 129.899 88.7692 125.078 88.7692H97.756L101.506 98L85.0135 88.7692H48.929C44.1076 88.7692 40.2045 84.8462 40.2045 80V50.7692C40.1662 45.9615 44.0693 42 48.8908 42Z"
				fill="#7F54B3"
			/>
			<path
				d="M44.8709 50.723C45.4039 50.0175 46.2033 49.6462 47.2693 49.5719C49.2108 49.4234 50.3149 50.3145 50.5814 52.2453C51.7615 60.0056 53.0559 66.5778 54.4264 71.9617L62.7637 56.4782C63.5251 55.0673 64.4768 54.3246 65.6189 54.2504C67.294 54.139 68.3219 55.1786 68.7406 57.3694C69.6924 62.3077 70.9106 66.5035 72.3573 70.0681C73.3471 60.6369 75.0222 53.8419 77.3825 49.6462C77.9535 48.6065 78.7911 48.0867 79.8951 48.0124C80.7707 47.9382 81.5702 48.1981 82.2935 48.755C83.0168 49.312 83.3975 50.0175 83.4736 50.8715C83.5117 51.5398 83.3975 52.0968 83.0929 52.6538C81.6082 55.3272 80.39 59.82 79.4002 66.0579C78.4484 72.1102 78.1058 76.8258 78.3342 80.2047C78.4104 81.133 78.2581 81.9499 77.8774 82.6553C77.4205 83.4722 76.7353 83.9178 75.8597 83.9921C74.8699 84.0663 73.842 83.6207 72.8522 82.6182C69.3117 79.0908 66.4945 73.8183 64.4388 66.8006C61.9642 71.5533 60.1369 75.1178 58.9567 77.4942C56.7106 81.69 54.8071 83.8435 53.2082 83.9549C52.1803 84.0292 51.3047 83.1752 50.5433 81.3929C48.6017 76.5288 46.5079 67.1347 44.2618 53.2107C44.1476 52.2453 44.3379 51.3913 44.8709 50.723Z"
				fill="white"
			/>
			<path
				d="M126.922 56.5426C125.536 54.1968 123.495 52.7819 120.761 52.2234C120.029 52.0745 119.336 52 118.681 52C114.985 52 111.981 53.8617 109.632 57.5851C107.63 60.75 106.629 64.25 106.629 68.0851C106.629 70.9521 107.245 73.4096 108.477 75.4574C109.863 77.8032 111.904 79.2181 114.638 79.7766C115.37 79.9255 116.063 80 116.717 80C120.453 80 123.456 78.1383 125.767 74.4149C127.769 71.2128 128.77 67.7128 128.77 63.8777C128.77 60.9734 128.154 58.5532 126.922 56.5426ZM122.07 66.8564C121.531 69.3138 120.568 71.1383 119.143 72.367C118.027 73.3351 116.987 73.7447 116.024 73.5585C115.1 73.3723 114.33 72.5904 113.752 71.1383C113.29 69.984 113.059 68.8298 113.059 67.75C113.059 66.8192 113.136 65.8883 113.329 65.0319C113.675 63.5053 114.33 62.016 115.37 60.6011C116.64 58.7766 117.988 58.0319 119.374 58.2925C120.299 58.4787 121.069 59.2606 121.646 60.7128C122.108 61.867 122.339 63.0213 122.339 64.1011C122.339 65.0691 122.224 66 122.07 66.8564Z"
				fill="white"
			/>
			<path
				d="M102.767 56.5426C101.381 54.1968 99.3018 52.7819 96.6063 52.2234C95.8747 52.0745 95.1816 52 94.5269 52C90.8303 52 87.8267 53.8617 85.4778 57.5851C83.4755 60.75 82.4743 64.25 82.4743 68.0851C82.4743 70.9521 83.0904 73.4096 84.3226 75.4574C85.7089 77.8032 87.7497 79.2181 90.4837 79.7766C91.2153 79.9255 91.9085 80 92.5631 80C96.2983 80 99.3018 78.1383 101.612 74.4149C103.615 71.2128 104.616 67.7128 104.616 63.8777C104.616 60.9734 104 58.5532 102.767 56.5426ZM97.9155 66.8564C97.3765 69.3138 96.4138 71.1383 94.989 72.367C93.8723 73.3351 92.8326 73.7447 91.87 73.5585C90.9458 73.3723 90.1757 72.5904 89.5981 71.1383C89.136 69.984 88.9049 68.8298 88.9049 67.75C88.9049 66.8192 88.9819 65.8883 89.1745 65.0319C89.521 63.5053 90.1757 62.016 91.2153 60.6011C92.4861 58.7766 93.8338 58.0319 95.2201 58.2925C96.1442 58.4787 96.9144 59.2606 97.492 60.7128C97.9541 61.867 98.1851 63.0213 98.1851 64.1011C98.1851 65.0691 98.1081 66 97.9155 66.8564Z"
				fill="white"
			/>
			<defs>
				<filter
					id="filter0_ddd"
					x="0.5"
					y="0"
					width="169"
					height="120"
					filterUnits="userSpaceOnUse"
					colorInterpolationFilters="sRGB"
				>
					<feFlood floodOpacity="0" result="BackgroundImageFix" />
					<feColorMatrix
						in="SourceAlpha"
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
					/>
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="1.5" />
					<feColorMatrix
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
					/>
					<feBlend
						mode="normal"
						in2="BackgroundImageFix"
						result="effect1_dropShadow"
					/>
					<feColorMatrix
						in="SourceAlpha"
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
					/>
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="2.5" />
					<feColorMatrix
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
					/>
					<feBlend
						mode="normal"
						in2="effect1_dropShadow"
						result="effect2_dropShadow"
					/>
					<feColorMatrix
						in="SourceAlpha"
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
					/>
					<feOffset dy="2" />
					<feGaussianBlur stdDeviation="1" />
					<feColorMatrix
						type="matrix"
						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
					/>
					<feBlend
						mode="normal"
						in2="effect2_dropShadow"
						result="effect3_dropShadow"
					/>
					<feBlend
						mode="normal"
						in="SourceGraphic"
						in2="effect3_dropShadow"
						result="shape"
					/>
				</filter>
			</defs>
		</svg>
	</div>
);

export default WooImage;