<script lang="ts">
  import type { Snippet } from 'svelte';
  import Header from './Header.svelte';
  import AdBanner from './AdBanner.svelte';

  // The app-shell layout (all screens): the nav bar grows; the ad strip, content and
  // optional tab bar pin to the bottom (ad directly above the content). Pass `scroll`
  // false for screens that own their vertical fit (the game board).
  let {
    title,
    back,
    menu,
    tabbar,
    children,
    scroll = true,
    growNav = false,
    column = false,
  }: {
    title: string;
    back?: string;
    menu?: Snippet;
    tabbar?: Snippet;
    children?: Snippet;
    scroll?: boolean;
    growNav?: boolean;
    // column lays the content out as a flex column so a child can own the vertical fit
    // (the game makes only its board scroll while the score/rack/tab bar stay put).
    column?: boolean;
  } = $props();
</script>

<div class="screen">
  <Header {title} {back} {menu} grow={growNav} />
  <AdBanner />
  <main class="content" class:scroll class:fill={!growNav} class:column>{@render children?.()}</main>
  {#if tabbar}
    <nav class="tabbar">{@render tabbar()}</nav>
  {/if}
</div>

<style>
  .screen {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .content {
    flex: 0 1 auto;
    min-height: 0;
  }
  .content.fill {
    flex: 1 1 auto;
  }
  .content.scroll {
    overflow-y: auto;
  }
  .content.column {
    display: flex;
    flex-direction: column;
  }
  .tabbar {
    flex: 0 0 auto;
  }
</style>
