<script>
	export let currentTheme;

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

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

<style>
	.button-row {
		display: flex;
		gap: 10px;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10px;
	}
</style>

