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

  export let homepage: boolean = false

  let nav: HTMLElement;

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

  onMount(async () => {
    if (!homepage) return

    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('!border-b-slate-800')
      },
      onLeaveBack: () => {
        nav.classList.remove('!border-b-slate-800')
      }
    })
  })
</script>

<nav
  class="nav p-4 md:px-8 fixed top-0 w-full bg-slate-950 z-50 flex items-center gap-16"
  class:sticky={!homepage}
  class:!border-b-slate-800={!homepage}
  class:justify-between={homepage}
  bind:this={nav}
>
  <div
    class="nav__logo-spot"
  >
    {#if !homepage}
      <a href="/">
        <enhanced:img
          src="$lib/assets/kopyl_frame_white.png"
          alt="kopyl logo"
          class="nav__logo"
        ></enhanced:img>
      </a>
    {/if}
  </div>

  <h1 class="text-2xl">
    <slot name="title"></slot>
  </h1>

  {#if !$page.url.pathname.startsWith('/blog')}
    <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>
  {/if}
</nav>

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

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