import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { CSSProperties } from 'react';

const ConfirmModal = ({
  visible,
  header,
  message,
  onHide,
  onConfirm,
  disableConfirm,
  disableCancel,
  confirmLabel,
  cancelLabel,
  onCancel = onHide,
  style,
}: {
  visible: boolean;
  header: string;
  message: string | JSX.Element;
  onHide: () => void;
  onConfirm: () => void;
  disableConfirm?: boolean;
  disableCancel?: boolean;
  confirmLabel: string;
  cancelLabel: string;
  onCancel: () => void;
  style?: CSSProperties;
}) => {
  return (
    <Dialog
      closable
      visible={visible}
      onHide={onHide}
      header={header}
      style={{ width: '25vw', ...style }}
      footer={
        <div>
          <Button
            label={confirmLabel}
            style={{ minWidth: '4rem' }}
            onClick={onConfirm}
            disabled={disableConfirm}
          />
          <Button
            label={cancelLabel}
            onClick={onCancel}
            style={{ minWidth: '4rem' }}
            severity="danger"
            disabled={disableCancel}
          />
        </div>
      }
    >
      <div className="mt-2">{message}</div>
    </Dialog>
  );
};

export default ConfirmModal;