import { __ } from '@wordpress/i18n';
import cliqThemesLogo from './images/cliqthemes-light.png';
import storeLocatorLogo from './images/store-locator-light.png';

const Logo = ( { className, source, viewBox, label } ) => (
	<svg className={ className } viewBox={ viewBox } role="img" aria-label={ label }>
		<image href={ source } width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
	</svg>
);

const BannerBrand = ( { showPro = true, textDomain = 'cliq-store-locator' } ) => (
	<div className="cliq-sl-banner-brand">
		<div className="cliq-sl-banner-brand__product">
			<Logo className="cliq-sl-banner-brand__store-logo" source={ storeLocatorLogo } viewBox="0 0 1307 243" label={ __( 'Store Locator', textDomain ) } />
			{ showPro && <span className="cliq-sl-banner-brand__pro">{ __( 'Pro', textDomain ) }</span> }
		</div>
		<span className="cliq-sl-banner-brand__by">{ __( 'by', textDomain ) }</span>
		<Logo className="cliq-sl-banner-brand__cliq-logo" source={ cliqThemesLogo } viewBox="0 0 1159 218" label="CliqThemes" />
	</div>
);

export default BannerBrand;
