<script lang="ts">
  import { Button } from 'bits-ui';
  import IconPlus from '~icons/tabler/plus';

  let { createHref = null, msgAdd = '', children } = $props();
</script>

{#if createHref}
  <Button.Root
    href={createHref}
    class="fixed flex items-center sm:bottom-12 sm:right-12 bottom-6 right-6
      bg-neutral-100 rounded-full shadow-xl sm:px-6 sm:py-2 p-4
      transition-all duration-300 ease-in-out
      hover:bg-neutral-300 hover:scale-105"
  >
    <span class="hidden sm:block">{msgAdd}</span>
    <IconPlus class="sm:ml-2" />
  </Button.Root>
{/if}

<div class="w-full sm:px-6 px-3 py-4 max-w-3xl mx-auto">
  {#if children}
    {@render children?.()}
  {:else}
    <div class="p-4 text-center text-neutral-700">
      <p>Nothing here.</p>
      {#if createHref}
        <p>Get started by clicking "{msgAdd}".</p>
      {/if}
    </div>
  {/if}
</div>
