import React from 'react';

type Props = {
	isLoading?: boolean;
	className?: string;
};

export const WebUiLogo: React.FC< Props > = ( {
	isLoading,
	className,
}: Props ) => {
	return (
		<div className={ className }>
			<div
				className={ ` ${
					isLoading ? 'animate-[spin_6s_infinite]' : ''
				}` }
			>
				<svg
					width="100%"
					height="100%"
					viewBox="0 0 1395 1387"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
				>
					<g transform="matrix(1,0,0,1,-5794,0)">
						<g
							id="captcha-mark-w"
							transform="matrix(1.22819,0,0,1.22961,481.695,-153.536)"
						>
							<clipPath id="_clip1">
								<rect
									x="4325.42"
									y="124.866"
									width="1135"
									height="1128"
								/>
							</clipPath>
							<g clipPath="url(#_clip1)">
								<g>
									<g transform="matrix(1.77245,0,0,1.7704,2036.1,-702.932)">
										<path
											d="M1727.29,904.649L1832.46,1009.82L1743.76,944.049C1711.49,971.549 1670.7,989.341 1625.94,992.893L1609.34,1104.72L1592.74,992.893C1560.53,990.338 1530.39,980.412 1503.99,964.802L1533.56,935.235C1556.31,946.833 1582.07,953.376 1609.34,953.376C1655.35,953.376 1697.04,934.755 1727.29,904.649Z"
											style={ {
												fill: 'white',
												fillOpacity: '0.43',
											} }
										/>
									</g>
									<g transform="matrix(1.77245,0,0,1.7704,2036.1,-702.932)">
										<path
											d="M1430.12,681.758L1459.74,711.378C1448.46,733.883 1442.11,759.279 1442.11,786.146C1442.11,831.566 1460.26,872.78 1489.68,902.921L1392.35,1000.25L1451.44,920.562C1423.94,888.294 1406.14,847.511 1402.59,802.747L1290.77,786.146L1402.59,769.546C1405.12,737.729 1414.83,707.925 1430.12,681.758Z"
											style={ {
												fill: 'white',
												fillOpacity: '0.43',
											} }
										/>
									</g>
									<g transform="matrix(1.77245,0,0,1.7704,2036.1,-702.932)">
										<path
											d="M1830.85,563.667L1834.6,560.883L1767.24,651.731C1794.74,683.999 1812.53,724.782 1816.09,769.546L1927.91,786.146L1816.09,802.747C1813.58,834.358 1803.97,863.982 1788.86,890.025L1759.21,860.378C1770.32,838.009 1776.57,812.802 1776.57,786.146C1776.57,739.749 1757.63,697.739 1727.08,667.436L1830.85,563.667Z"
											style={ {
												fill: 'white',
												fillOpacity: '0.43',
											} }
										/>
									</g>
									<g transform="matrix(1.77245,0,0,1.7704,2036.1,-702.932)">
										<path
											d="M1389.34,564.783L1474.92,628.244C1507.19,600.744 1547.97,582.952 1592.74,579.4L1609.34,467.575L1625.94,579.4C1657.16,581.877 1686.44,591.281 1712.25,606.072L1682.55,635.775C1660.43,624.978 1635.59,618.917 1609.34,618.917C1563.53,618.917 1522,637.374 1491.8,667.242L1389.34,564.783Z"
											style={ {
												fill: 'white',
												fillOpacity: '0.43',
											} }
										/>
									</g>
								</g>
							</g>
						</g>
					</g>
				</svg>
			</div>
			<div className="absolute top-0 right-0">
				<svg
					width="100%"
					height="100%"
					viewBox="0 0 1395 1387"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
				>
					<g transform="matrix(1,0,0,1,-5794,0)">
						<g
							id="captcha-mark-w"
							transform="matrix(1.22819,0,0,1.22961,481.695,-153.536)"
						>
							<clipPath id="_clip1">
								<rect
									x="4325.42"
									y="124.866"
									width="1135"
									height="1128"
								/>
							</clipPath>
							<g clipPath="url(#_clip1)">
								<g transform="matrix(1.77245,0,0,1.7704,2036.1,-702.932)">
									<path
										d="M1693.55,711.864C1704.35,743.391 1704.53,851.487 1611.63,912.994C1520.21,852.414 1520.39,743.689 1529.72,711.864C1555.26,700.92 1578.06,693.3 1611.63,693.49C1643.32,693.669 1668.78,698.809 1693.55,711.864ZM1543.69,727.081C1543.63,727.108 1543.57,727.135 1543.5,727.162C1535.73,753.659 1535.58,844.181 1611.7,894.619C1688.46,843.796 1688.9,754.764 1680.1,727.766C1686.79,759.409 1681.87,838.522 1611.71,884.976C1542.12,838.863 1537.75,758.469 1543.69,727.081Z"
										style={ { fill: 'white' } }
									/>
								</g>
							</g>
						</g>
					</g>
				</svg>
			</div>
		</div>
	);
};