<script lang="ts">
  import { mdiChevronLeft } from "@mdi/js";

  import Icon from "./Icon.svelte";

  export let title = "";
  export let backHref: string | undefined = undefined;
</script>

<div class="flex">
  <div class="flex flex-wrap items-center gap-2">
    {#if backHref}
      <a class="btn btn-sm btn-circle btn-ghost" href={backHref}>
        <Icon path={mdiChevronLeft} size={1.8} />
      </a>
    {/if}

    <h1 class="heading">{title}</h1>
    <slot />
  </div>
  <!-- Button on the right side (apply ml-auto) -->
  <slot name="rightBtn" />
</div>
