<script setup>
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { computed, ref, watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  maxWidth: {
    type: String,
    default: '2xl',
  },
  closeable: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['update:show', 'close']);

const open = ref(props.show);

watch(() => props.show, (newVal) => {
  open.value = newVal;
});

watch(open, (newVal) => {
  emit('update:show', newVal);
  if (!newVal) {
    emit('close');
  }
});

const maxWidthClass = computed(() => {
  const maxWidthMap = {
    sm: 'sm:max-w-sm',
    md: 'sm:max-w-md',
    lg: 'sm:max-w-lg',
    xl: 'sm:max-w-xl',
    '2xl': 'sm:max-w-2xl',
    wide: 'sm:max-w-[1200px]',
  };
  return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
});
</script>

<template>
  <Dialog v-model:open="open" :modal="true">
    <DialogContent :class="maxWidthClass">
      <DialogHeader>
        <DialogTitle>
          <slot name="title" />
        </DialogTitle>
        <DialogDescription>
          <slot name="description" />
        </DialogDescription>
      </DialogHeader>

      <div class="py-4">
        <slot name="content" />
      </div>

      <DialogFooter>
        <slot name="footer" />
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
