<script lang="ts">
	const { lastMode, onClick }: { lastMode: string; onClick: (arg0: string) => void } = $props();
</script>

<div class="flex justify-center space-x-2">
	{#each ['reset', 'easy', 'medium', 'hard'] as mode (mode)}
		<button
			class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white capitalize"
			class:bg-cyan-800={lastMode === mode}
			onclick={() => onClick(mode)}>{mode}</button
		>
	{/each}
</div>
