<script setup>
import { Dialog, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui';
import { Button } from '@/components/ui';

const props = defineProps({
  open: Boolean,
  title: String,
  fullscreen: { type: Boolean, default: false }
});

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

const handleClose = () => {
  emit('close');
  emit('update:open', false);
};
</script>

<template>
  <Dialog :open="open" :fullscreen="fullscreen" @update:open="handleClose">
    <DialogHeader>
      <DialogTitle>{{ title }}</DialogTitle>
      <Button variant="ghost" size="sm" @click="handleClose">Cerrar</Button>
    </DialogHeader>

    <div :class="fullscreen ? 'flex-1 overflow-auto' : ''">
      <slot />
    </div>

    <DialogFooter>
      <slot name="footer">
        <Button @click="handleClose">OK</Button>
      </slot>
    </DialogFooter>
  </Dialog>
</template>
