<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 setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module views/AccountManagement/ModalHeader Reusable modal
 *   header with title text and close button.
 */

import { useModalStore } from "@/stores/modal";

defineProps({
  headerText: {
    type: String,
    required: true,
  },
});

const modalStore = useModalStore();
const { closeModal } = modalStore;
</script>
