<script>
	export let currentTheme;

	const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
</script>

<fieldset>
	<legend>Theme Selector</legend>

	<div class="button-row">
		{#each themes as theme}
			<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
				{theme.charAt(0).toUpperCase()}
			</button>
		{/each}
	</div>
</fieldset>

<style>
	fieldset {
		display: inline-flex;
		margin: 0 1rem 0 auto;
	}

	.button-row {
		display: flex;
		gap: 1rem;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}
</style>
