<script lang="ts">
	export let size: 'default' | 'medium' | 'lg' = 'default';
	export let hasText = false;

	const logoBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAABJQTFRFAQEBAAAAHGHnRcxVStlbMXLnk8SHtQAAAAF0Uk5TAEDm2GYAAABMSURBVHjadc9JCgAhDERRa7r/lZs0ikawdv+tkvEYALS07U2QawmOTo1oQBKr8/cUMLY7JLEPYLW0oISSNLtgiojRBfv0AuB67vH3B+FjAY/0rrGiAAAAAElFTkSuQmCC';

	$: sizeClasses = {
		'size-10': size === 'default',
		'size-16': size === 'medium',
		'size-20': size === 'lg'
	};

	$: textSizeClasses = {
		'text-4xl': size === 'default',
		'text-5xl': size === 'lg' || size === 'medium'
	};
</script>

<div class="flex items-center gap-1.5 {$$props.class || ''}">
	<img src={logoBase64} alt="Wplace logo" class="pixelated" class:size-10={sizeClasses['size-10']} class:size-16={sizeClasses['size-16']} class:size-20={sizeClasses['size-20']} />
	{#if hasText}
		<span class="text-base-content font-pixel" class:text-4xl={textSizeClasses['text-4xl']} class:text-5xl={textSizeClasses['text-5xl']}>
			wplace
		</span>
	{/if}
</div>
