<script setup lang="ts">
import { useRouterPush } from '@/hooks/common/router'

defineOptions({ name: 'PageHeader' })

withDefaults(defineProps<Props>(), {
  showBack: true,
})

interface Props {
  showBack?: boolean
}

const { routerBack } = useRouterPush()
</script>

<template>
  <NCard :bordered="false" class="rounded-xl shadow-sm">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <NButton v-if="showBack" circle secondary @click="routerBack">
          <template #icon>
            <icon-ic-baseline-arrow-back class="text-icon" />
          </template>
        </NButton>
        <slot />
      </div>
      <div class="flex gap-3">
        <slot name="action" />
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>
