<script setup lang="ts">
import type { Component, DefineComponent } from 'vue';

import IconHover from '@arco-design/web-vue/es/_components/icon-hover';

defineProps<{
  title?: string;
  content?: string | (() => DefineComponent | Component);
}>();

defineEmits(['close']);
</script>

<template>
  <slot name="header">
    <div class="flex justify-end mb7">
      <slot name="close">
        <icon-hover @click="$emit('close')">
          <icon-close />
        </icon-hover>
      </slot>
    </div>
  </slot>
  <slot>
    <div class="flex flex-col text-center">
      <div v-if="title" class="mb4 text-lg font-600">{{ title }}</div>
      <template v-else />
      <component :is="content" v-if="typeof content === 'function'" />
      <div v-else>{{ content }}</div>
    </div>
  </slot>
</template>
