<style>
  a,
  button {
    padding: 12px 16px;
    display: flex;
    border-radius: var(--rounded-btn, 0.5rem);
    cursor: pointer;
    animation: nav-button-pop 200ms ease-out;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  a:active:hover,
  a:active:focus,
  button:active:hover,
  button:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(var(--btn-focus-scale, 0.97));
  }
</style>

<script lang="ts">
  import cx from "classnames"
  import {fade} from "@lib/transition"
  import {page} from "$app/stores"

  const {
    children,
    href = "",
    title = "",
    notification = false,
    replaceState = false,
    ...restProps
  } = $props()

  const active = $derived($page.url.pathname === href)
  const wrapperClass = $derived(
    cx(
      restProps.class,
      "group relative flex shrink-0 items-center gap-3 rounded-xl text-left transition-all",
      {
        "hover:bg-base-100": true,
        "bg-primary/15 text-primary font-semibold": active,
        "tooltip tooltip-right": title,
      },
    ),
  )
</script>

{#if href}
  <a
    {href}
    {...restProps}
    data-tip={title}
    data-sveltekit-replacestate={replaceState}
    class={wrapperClass}>
    {#if active}
      <div class="bg-primary absolute top-1/2 left-0 h-5 w-1 -translate-y-1/2 rounded-r-full"></div>
    {/if}
    {@render children?.()}
    {#if notification}
      <div class="bg-secondary absolute top-5 right-[1.15rem] h-2 w-2 rounded-full" transition:fade>
      </div>
    {/if}
  </a>
{:else}
  <button {...restProps} data-tip={title} class={wrapperClass}>
    {#if notification}
      <div class="bg-secondary absolute top-5 right-[1.15rem] h-2 w-2 rounded-full" transition:fade>
      </div>
    {/if}
    {@render children?.()}
  </button>
{/if}
