<script setup lang="ts">
import Text from '../basic/Text.vue';
import CommonRoot from '../dialog/CommonRoot.vue';
import FlexCol from '../layout/FlexCol.vue';
import StatusBarSpace from '../layout/space/StatusBarSpace.vue';
import NavBar from '../nav/NavBar.vue';

const props = withDefaults(defineProps<{	
  title?: string,
  desc?: string,
  isHome?: boolean,
  customNavBar?: boolean,
}>(), {
  customNavBar: true,
});

</script>

<template>
  <CommonRoot>
    <FlexCol innerClass="nana-demo-page" backgroundColor="background.page">
      <StatusBarSpace v-if="customNavBar" />
      <NavBar v-if="customNavBar" :title="title" leftButton="back" :showLeftButton="!isHome" />
      <view v-if="title || desc" class="header">
        <Text color="primary" fontConfig="h3" :text="title" />
        <Text v-if="desc" color="text.second" :text="desc" />
      </view>
      <slot />
    </FlexCol>
  </CommonRoot>
</template>

<style lang="scss">
.nana-demo-page {
  /* #ifdef H5 */
  min-height: calc(100vh - env(safe-area-inset-top));
  /* #endif */
  /* #ifndef H5 */
  min-height: calc(100vh);
  /* #endif */

  & > .header {
    display: flex;
    flex-direction: column;
    margin: 40rpx 40rpx;
    flex-shrink: 0;
  }
}
</style>