<script lang="ts">
	import { backgroundOptions } from '$lib/backgrounds';
	import { currentBackground } from '$lib/stores/settings';
	import Icon from '@iconify/svelte';
</script>

<section class="bg-base-200 rounded-xl p-6">
	<div class="flex items-center gap-3 mb-6">
		<Icon icon="mdi:image" class="w-6 h-6 text-primary" />
		<div>
			<h2 class="text-xl font-semibold text-base-content">Background</h2>
			<p class="text-base-content/70 text-sm">Select a background style for your workspace</p>
		</div>
	</div>

	<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
		{#each backgroundOptions as bg}
			<button
				onclick={() => ($currentBackground = bg.id)}
				class="group relative p-4 rounded-xl border-2 transition-all hover:scale-105 {$currentBackground ===
				bg.id
					? 'border-primary ring-2 ring-primary/30'
					: 'border-base-300 hover:border-primary/50'}"
			>
				<div class="aspect-video rounded-lg mb-3 {bg.preview} border border-black/10">
					{#if bg.image}
						<img
							src={bg.image}
							alt={bg.name}
							class="w-full h-full object-cover opacity-70 rounded-lg"
						/>
					{/if}
				</div>
				<p class="text-sm font-medium text-base-content">{bg.name}</p>
				{#if $currentBackground === bg.id}
					<div
						class="absolute -top-1 -right-1 w-6 h-6 bg-primary rounded-full flex items-center justify-center"
					>
						<Icon icon="mdi:check" class="w-4 h-4 text-primary-content" />
					</div>
				{/if}
			</button>
		{/each}
	</div>
</section>
