<script setup lang="ts">
const showStats = useState("showStats", () => false);
</script>

<template>
  <div
    :style="{
      display: 'flex',
      flexDirection: 'column',
      gap: '4px',
    }"
  >
    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
      <input id="statsCheckbox" v-model="showStats" type="checkbox" />
      <label for="statsCheckbox">Stats</label>
    </div>

    <div>
      <Screen>
        <slot name="top">
          <slot />
        </slot>
        <Stats v-if="showStats" />
      </Screen>
    </div>
    <div>
      <Screen>
        <slot name="bottom">
          <slot />
        </slot>
        <Stats v-if="showStats" />
      </Screen>
    </div>
  </div>
</template>
