<script lang="ts">
  const { href } = $props();

  let scrollY = $state(0);
</script>

<svelte:window bind:scrollY />

<div class="flex items-center gap-x-2 transition-opacity duration-250" class:opacity-0={scrollY > 0}>
  <div class="divider divider-horizontal m-0"></div>
  <a {href} aria-label="scroll to teams">
    <div class="border-accent border-2 rounded-t-full rounded-b-full h-7 w-4 p-1">
      <div class="bg-accent rounded-full h-1 w-1 bounce"></div>
    </div>
  </a>
  <a class="link text-sm" {href}>Zu den Teams</a>
  <div class="divider divider-horizontal m-0"></div>
</div>

<style>
  @keyframes scrollDown {
    0% {
      transform: none;
      opacity: 0.25;
    }
    50% {
      transform: translateY(0%);
      opacity: 1;
    }
    100% {
      transform: translateY(250%);
      opacity: 0;
    }
  }

  .bounce {
    animation: scrollDown 2s infinite;
  }
</style>
