<script lang="ts">
  import type {Snippet} from "svelte"
  import cx from "classnames"
  import Button from "@lib/components/Button.svelte"

  const {
    onclick = () => {},
    className = "",
    children,
  }: {
    onclick?: () => void
    className?: string
    children?: Snippet
  } = $props()
</script>

<div class={cx("fixed bottom-20 mb-sai right-4 z-nav hide-on-keyboard md:hidden", className)}>
  <Button
    class="btn btn-primary size-14 rounded-full border-none p-0 shadow-[0_8px_24px_-6px_var(--color-primary)] transition-transform motion-safe:hover:scale-110 motion-safe:active:scale-95"
    {onclick}>
    <div class="flex items-center justify-center">
      {@render children?.()}
    </div>
  </Button>
</div>
