<script setup lang="ts">
import { Dialog } from '~/components/pub/ui/dialog'

interface DialogProps {
  title: string
  description?: string
  preventOutside?: boolean
  open?: boolean
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
}

const props = withDefaults(defineProps<DialogProps>(), {
  preventOutside: false,
  open: false,
  size: 'md',
})

const emit = defineEmits<{
  'update:open': [value: boolean]
}>()

// Computed untuk menentukan class size berdasarkan prop size
const sizeClass = computed(() => {
  const sizeMap = {
    sm: 'sm:max-w-[350px]',
    md: 'sm:max-w-[425px]',
    lg: 'sm:max-w-[600px]',
    xl: 'sm:max-w-[800px]',
    full: 'sm:max-w-[95vw]',
  }
  return sizeMap[props.size]
})

// Computed untuk state dialog
const isOpen = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value),
})
</script>

<template>
  <Dialog v-model:open="isOpen">
    <DialogContent
      :class="sizeClass" @interact-outside="(e: any) => preventOutside && e.preventDefault()"
      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
      >
      <DialogHeader>
        <DialogTitle>{{ props.title }}</DialogTitle>
        <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
      </DialogHeader>
      <slot />
    </DialogContent>
  </Dialog>
</template>
