/**
 * 드래그 가능한 모달 프레임 — AppPopup 기반
 */
import React from 'react';
import AppPopup from './AppPopup';

export interface DraggableModalFrameProps {
  onClose: () => void;
  title: React.ReactNode;
  titleKo?: React.ReactNode;
  badge?: string;
  children: React.ReactNode;
  overlayClassName?: string;
  dialogClassName?: string;
  bodyClassName?: string;
  zIndex?: number;
  width?: number | string;
  closeOnBackdrop?: boolean;
}

export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
  onClose,
  title,
  titleKo,
  badge,
  children,
  overlayClassName = 'sp-modal-overlay',
  dialogClassName = 'sp-modal',
  bodyClassName = 'sp-modal-body app-popup-body',
  zIndex = 1000,
  width,
  closeOnBackdrop = true,
}) => (
  <AppPopup
    onClose={onClose}
    title={title}
    titleKo={titleKo}
    badge={badge}
    overlayClassName={overlayClassName}
    shellClassName={dialogClassName}
    bodyClassName={bodyClassName}
    zIndex={zIndex}
    width={width ?? 420}
    backdrop
    closeOnBackdrop={closeOnBackdrop}
    centered
  >
    {children}
  </AppPopup>
);

export default DraggableModalFrame;