<script lang="ts">
  import { onMount } from 'svelte';

  let showButton = false;
  const scrollThreshold = 300;

  function handleScroll() {
    showButton = (window.scrollY || document.documentElement.scrollTop) > scrollThreshold;
  }

  onMount(() => {
    handleScroll();
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  });

  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
</script>

<button
  class={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full border border-[var(--border-color)] bg-[var(--header-bg)] text-[var(--text-secondary)] shadow-lg transition-all hover:border-[var(--primary)] hover:text-[var(--primary)] ${
    showButton ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-4 opacity-0'
  }`}
  aria-label="Back to top"
  on:click={scrollToTop}
>
  <i class="fas fa-chevron-up"></i>
</button>
