<template>
  <div :class="`modal ${isShow ? 'show' : ''}`">
    <div class="modal-content">
      <span class="close" @click="close">&times;</span>
      <p class="title">{{ title }}</p>
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "SimpleModal",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    }
  },
  setup(props) {
    const isShow = ref(props.show);
    const close = () => {
      isShow.value = false;
    };

    return {
      isShow,
      close
    };
  }
});
</script>

<style lang="css" scoped>
@import "./SimpleModal.css";
</style>
