<script lang="ts" setup>
import { ConfigProviderThemeVars } from 'wot-design-uni'
import { useRouter } from '../core/utils/router'
import { computed } from 'vue'

const props = defineProps<{
  transparent?: boolean
  title?: string
  dark?: boolean
  placeholder?: boolean
}>()
const router = useRouter()
const themeVars = computed<ConfigProviderThemeVars>(() => ({
  navbarColor: props.dark ? 'white' : 'black',
}))
</script>
<template>
  <div>
    <wd-config-provider :themeVars="themeVars">
      <wd-navbar
        fixed
        left-arrow
        safe-area-inset-top
        :bordered="false"
        :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
        v-bind="{ title }"
        @click-left="router.back()"
      ></wd-navbar>
      <template v-if="props.placeholder">
        <wd-navbar
          safe-area-inset-top
          :bordered="false"
          :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
        ></wd-navbar>
      </template>
    </wd-config-provider>
  </div>
</template>
