<template>
    <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
        border-b border-b-[1px] border-[#CBD5E1]
    ">
        <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
        <div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
                @click="closeModal"
            />
        </div>        
    </header>
</template>

<script>
import { useModalStore } from '@/stores/modal';
export default {
    props: {
        headerText: {
            type: String,
            required: true // 确保 headerText 是必填的
        }
    },
    setup(props) {
        const modalStore = useModalStore();
        const { headerText, } = props;
        const { closeModal } = modalStore;

        return {
            headerText,
            closeModal,
        };
  }
}
</script>