import type { ReactNode } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';
import './BaseFormDialog.scss';

interface Props {
  visible: boolean;
  onHide: () => void;
  title: string;
  width?: string;
  loading?: boolean;
  submitLabel?: string;
  cancelLabel?: string;
  onSubmit: () => void;
  children: ReactNode;
}

export default function BaseFormDialog({
  visible,
  onHide,
  title,
  width = '540px',
  loading = false,
  submitLabel = '저장',
  cancelLabel = '취소',
  onSubmit,
  children,
}: Props) {
  const footer = (
    <div className="form-dialog__footer">
      <Button label={cancelLabel} severity="secondary" text disabled={loading} onClick={onHide} />
      <Button label={submitLabel} loading={loading} onClick={onSubmit} />
    </div>
  );

  return (
    <Dialog
      visible={visible}
      header={title}
      style={{ width, maxWidth: '95vw' }}
      modal
      closable={!loading}
      draggable={false}
      onHide={onHide}
      footer={footer}
    >
      <div className="form-dialog__body">{children}</div>
    </Dialog>
  );
}
