<script lang="ts">
  import { Moon, Sun } from 'lucide-svelte';
  import { resolvedTheme, toggleTheme } from '$lib/theme';
  import { tooltip } from '$lib/actions/tooltip';

  const isDark = $derived($resolvedTheme === 'dark');
  const label = $derived(
    isDark ? 'Switch to light mode' : 'Switch to dark mode'
  );
</script>

<button
  class="theme-toggle"
  type="button"
  onclick={toggleTheme}
  aria-label={label}
  use:tooltip={label}
>
  {#if isDark}
    <Sun size={18} strokeWidth={1.75} />
  {:else}
    <Moon size={18} strokeWidth={1.75} />
  {/if}
</button>

<style>
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.82rem;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  .theme-toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
  }
</style>
