/**
 * GoDAM brand mark + wordmark.
 *
 * @param {Object}  props            Props.
 * @param {boolean} [props.markOnly] Render only the mark (no wordmark).
 */
const BrandLogo = ( { markOnly = false } ) => (
	<span className="godam-onboarding__brand" data-test-id="godam-onboarding-brand">
		<svg className="godam-onboarding__brand-mark" width="40" height="40" viewBox="0 0 60 64" fill="none" aria-hidden="true">
			<path d="M28.8726 11.918C28.6663 11.6696 28.3292 11.6071 28.0381 11.7664L2.80244 26.138C1.34399 26.9765 0.207904 28.3907 0.0285135 30.048C-0.181209 32.0575 0.77808 33.9101 2.50689 34.8994L6.75483 37.3303C6.87009 37.3962 7.00007 37.362 7.0902 37.2832L28.8795 12.7694C29.091 12.521 29.0953 12.1758 28.9055 11.9369L28.8726 11.918Z" fill="currentColor" />
			<path d="M58.883 6.47149C58.8925 3.97813 57.4713 2.01324 55.5233 0.985398C53.6515 -0.172641 51.2199 -0.412481 49.0465 0.820911L39.742 6.12193C38.6458 6.7549 37.7532 7.67823 37.1735 8.78058L18.4544 42.765C18.1442 43.3697 18.3548 44.0987 18.9475 44.4378L35.6264 53.9822C36.2192 54.3214 36.9635 54.139 37.3396 53.572L57.8369 20.6051C58.5155 19.5593 58.8812 18.3344 58.8907 17.0796L58.909 6.46464L58.883 6.47149Z" fill="currentColor" />
			<path d="M59.7051 58.7002L59.733 29.9036C59.7442 29.5841 59.5051 29.3169 59.1844 29.2638C58.8638 29.2107 58.5631 29.3863 58.4669 29.7006L47.8078 60.5836C47.7576 60.7069 47.8182 60.8286 47.9335 60.8945L52.1814 63.3254C53.9102 64.3147 56.0134 64.2145 57.6721 63.0342C59.0369 62.0552 59.7285 60.3867 59.7215 58.7096L59.7051 58.7002Z" fill="currentColor" />
		</svg>
		{ ! markOnly && <span className="godam-onboarding__brand-word">GoDAM</span> }
	</span>
);

export default BrandLogo;