<template>
    <div class="page-header">
        <div class="header">
            <span class="back" v-if="showBack">
                <van-icon  name="down" class="back-icon" @click="handleBack" />
            </span>

            <span>{{ title }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
// import { useRouter } from 'vue-router'
import { Icon as VanIcon } from 'vant'

const router = useRouter()

defineProps<{
    title: string
    showBack?: boolean
}>()

const handleBack = () => {
    router.back()
}
</script>

<style scoped lang="scss">
.page-header {
    .header {
        position: relative;
        text-align: left;
        font-size: var(--font-size-22);
        color: var(--white);
        font-weight: 700;
        margin: 10px 0 10px 16px;
        height: 40px;
        display: flex;
        align-items: center;
        line-height: 40px;



        .back {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(22, 51, 0, 0.08);
            border-radius: 50%;
            margin-right: 20px;
        }

        .back-icon {
            line-height: 36px;
            font-size: var(--font-size-20);
            cursor: pointer;
            transform: rotate(90deg);
        }
    }
}
</style>
