<script setup lang="ts">
import { NativeBackButton } from '@native-vue-router/preset-native'

withDefaults(defineProps<{ title: string; subtitle?: string; back?: boolean; large?: boolean }>(), {
  back: false,
  large: false,
})
</script>

<template>
  <header class="app-header" :class="{ 'app-header--large': large }">
    <NativeBackButton v-if="back" />
    <div class="app-header__title">
      <p v-if="subtitle">{{ subtitle }}</p>
      <h1>{{ title }}</h1>
    </div>
    <div class="app-header__actions"><slot /></div>
  </header>
</template>
