<script lang="ts">
  import { getPreferences, updatePreferences } from '$lib/stores/preferences.svelte.js';

  const prefs = getPreferences();

  const zones = [
    { id: 'default', label: 'Default', swatch: 'bg-bg' },
    { id: 'cave', label: 'Cave', description: 'Cool, focused', swatch: 'bg-[#141a1e]' },
    { id: 'energy', label: 'Energy', description: 'Warm, active', swatch: 'bg-[#1c1815]' },
    { id: 'reset', label: 'Reset', description: 'Natural, calm', swatch: 'bg-[#161a16]' },
  ] as const;

  function selectZone(id: string) {
    updatePreferences({ zone: id });
  }
</script>

<div class="flex flex-col gap-2">
  <p class="text-[12px] text-text-secondary font-medium">Sensory zone</p>
  <div class="grid grid-cols-4 gap-2">
    {#each zones as zone}
      <button
        class="flex flex-col items-center gap-1.5 p-3 rounded-xl border
          {prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)
            ? 'border-accent bg-accent-subtle'
            : 'border-border-subtle hover:border-border'}"
        style="transition-duration: var(--duration-ui)"
        onclick={() => selectZone(zone.id)}
        aria-pressed={prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)}
      >
        <div class="w-8 h-8 rounded-lg {zone.swatch} border border-border-subtle"></div>
        <span class="text-[12px] text-text-secondary">{zone.label}</span>
      </button>
    {/each}
  </div>
</div>
