<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
import { reactiveOmit } from '@vueuse/core';
import {
  DialogContent as DialogContentPrimitive,
  DialogPortal,
  useForwardPropsEmits,
} from 'reka-ui';
import { cn } from '@/lib/utils';
import DialogOverlay from './DialogOverlay.vue';

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<
  DialogContentProps & {
    /**
     * Tailwind max-width utility applied to the panel (e.g. `max-w-lg`).
     * @default 'max-w-[50vw]' when omitted (see `UiDialogContent` for the typed preset list).
     */
    maxWidth?: string;
  }
>();
const emits = defineEmits<DialogContentEmits>();

const delegatedProps = reactiveOmit(props, 'maxWidth');

const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
  <DialogPortal>
    <DialogOverlay />
    <DialogContentPrimitive
      data-slot="dialog-content"
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'bg-background-surface-modal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border border-border-surface-default p-6 shadow-lg duration-200',
          props.maxWidth ?? 'max-w-[50vw]',
        )
      "
    >
      <slot />
    </DialogContentPrimitive>
  </DialogPortal>
</template>
