<template>
  <div className="modal-container">
    <div className="wrapper">
      <div className="header-container">
        <span class="title">{{title}}</span>
        <Button className="close-button" :onClick="onCloseClick"><CloseModal /></Button>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
  const { title, onCloseClick } = defineProps(['title', 'onCloseClick'])
</script>

<style lang="scss">
.modal-container {
  background-color: var(--c-header-bg);
  box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);
  border-radius: 4px;
  .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 32px 40px;
    .header-container {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      margin-top: 8px;
      .title {
        display: block;
        height: 24px;
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
      }
      .close-button {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 0;
        margin-right: 0;
      }
    }
  }
}
</style>
