<script lang="ts">
  import MaterialSymbolsTranslateRounded from '~icons/material-symbols/translate-rounded';
  import {locale} from "$lib/translations";
  import {onMount} from "svelte";

  let nav: HTMLElement;

  const toggleLocale = () => {
    $locale = $locale === 'ru' ? 'en' : 'ru'
  }

  onMount(async () => {
    const {gsap} = await import('gsap')
    const {ScrollTrigger} = await import('gsap/ScrollTrigger')

    gsap.registerPlugin(ScrollTrigger);

    ScrollTrigger.create({
      trigger: '.hero__name',
      start: "top top+=97px",
      onEnter: () => {
        nav.classList.add('nav--with-border')
      },
      onLeaveBack: () => {
        nav.classList.remove('nav--with-border')
      }
    })
  })
</script>

<nav
  class="nav p-4 md:px-8 fixed top-0 w-full bg-slate-950 z-50 flex justify-between items-center"
  bind:this={nav}
>
  <div
    class="nav__logo-spot"
  ></div>

  <button
    class="flex items-center justify-between gap-1 py-1 px-2 rounded border border-slate-600 h-fit w-16 transition hover:border-slate-400 uppercase"
    on:click={toggleLocale}
  >
    <MaterialSymbolsTranslateRounded/>
    {$locale}
  </button>
</nav>

<style lang="postcss">
  .nav {
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .3s;
  }

  :global(.nav--with-border) {
    border-bottom-color: theme(colors.slate.800) !important;
  }

  .nav__logo-spot {
    width: 64px;
    height: 64px;
  }
</style>
