<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  wide: { type: Boolean, default: false },
  overlayClass: { type: String, default: '' },
  modalClass: { type: String, default: '' },
  bodyStyle: { type: String, default: '' },
})
const emit = defineEmits(['update:modelValue'])
const close = () => emit('update:modelValue', false)
</script>

<template>
<div v-if="modelValue" class="sb-overlay" :class="overlayClass" @click.self="close">
  <div class="sb-modal" :class="[{ 'sb-modal-wide': wide }, modalClass]">
    <div class="sb-modal-hdr">
      <slot name="header" />
      <button class="sb-rp-close" @click="close">✕</button>
    </div>
    <div class="sb-modal-body" :style="bodyStyle">
      <slot />
    </div>
    <div class="sb-modal-ftr">
      <slot name="footer" />
    </div>
  </div>
</div>
</template>
