<script>
  // `lanes` is the resolved display list ({key, label, description}), with
  // Today already pinned first. `oncustomize` opens the lane picker.
  let { lanes, selected, onselect, oncustomize } = $props();
</script>

<nav class="moods">
  {#each lanes as m (m.key)}
    <button class:active={selected === m.key} title={m.description} onclick={() => onselect(m.key)}>
      {m.label}
    </button>
  {/each}
  <button class="customize" title="Choose your lanes" aria-label="Customize lanes" onclick={oncustomize}>
    ✎
  </button>
</nav>

<style>
  .moods {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 4px 0 6px;
  }
  button {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.92rem;
    transition: all 0.14s ease;
  }
  button:hover { color: var(--accent-deep); border-color: var(--accent); }
  button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(47, 125, 91, 0.25);
  }
  .customize {
    padding: 8px 12px;
    color: var(--muted);
    opacity: 0.7;
    font-size: 0.95rem;
  }
  .customize:hover { opacity: 1; }
</style>
