/**
 * Cliq brand mark. Inline SVG so it inherits crisp rendering at any size and
 * needs no asset request. Used in the admin masthead.
 */
const BrandLogo = ( { size = 34, className = 'cliqthemes-ui-masthead__logo' } ) => (
	<svg
		viewBox="0 0 50 50"
		width={ size }
		height={ size }
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
		aria-hidden="true"
		className={ className }
	>
		<defs>
			<linearGradient id="cliq-logo-grad" x1="3" y1="9" x2="41" y2="47" gradientUnits="userSpaceOnUse">
				<stop stopColor="#8340ff" />
				<stop offset="1" stopColor="#5900ff" />
			</linearGradient>
		</defs>
		<rect x="3" y="9" width="38" height="38" rx="12" fill="url(#cliq-logo-grad)" />
		<path d="M28.1 22.5A9 9 0 1 0 28.1 33.5" stroke="#ffffff" strokeWidth="5.5" strokeLinecap="round" />
		<circle cx="31.6" cy="28" r="2.8" fill="#ffffff" opacity="0.85" />
		<circle cx="41" cy="9" r="9" fill="#b992ff" />
		<circle cx="41" cy="9" r="6.2" fill="#8340ff" />
	</svg>
);

export default BrandLogo;
