<script setup>
import { computed } from 'vue';
import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose
} from 'radix-vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  open: Boolean,
  fullscreen: Boolean
});

const emit = defineEmits(['update:open']);
</script>

<template>
  <DialogRoot :open="open" @update:open="emit('update:open', $event)">
    <slot name="trigger" />

    <DialogPortal>
      <DialogOverlay class="fixed inset-0 z-50 bg-black/35 backdrop-blur-sm animate-fade-in" />
      <DialogContent
        :class="cn(
          'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 glass-card p-4 shadow-xl animate-fade-in',
          fullscreen
            ? 'w-[96vw] max-w-[96vw] h-[92vh] max-h-[92vh] flex flex-col'
            : 'w-[min(680px,92vw)]'
        )"
      >
        <slot />
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>
