<script setup>
import './style.css';
import { Close } from '@element-plus/icons-vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const contentVisible = ref(false);
const emit = defineEmits(['close']);

onMounted(() => {
  setTimeout(() => {
    contentVisible.value = true;
  }, 100);
});

onBeforeUnmount(() => {});

function close() {
  contentVisible.value = false;
  setTimeout(() => {
    emit('close');
  }, 150);
}
</script>

<template>
  <div class="modal">
    <div class="dribbble-dialog pop-out" :class="{ visible: contentVisible }">
      <div class="logo"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="content-text">
        <p>Advance your career with a</p>
        <p>Professional Diploma in UX Design</p>
        <button>Learn More</button>
      </div>
      <el-button
        :icon="Close"
        size="small"
        circle
        style="
          background: #eeeb;
          color: #000;
          border: none;
          position: absolute;
          top: -3px;
          right: 8px;
          z-index: -10;
        "
        @click="close"
      ></el-button>
    </div>
  </div>
</template>
i
