import { Confirm } from '@arcblock/ux/lib/Dialog';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box } from '@mui/material';
import type { EventHandler } from 'react';

export default function ConfirmDialog({
  onConfirm,
  onCancel,
  title,
  message,
  confirm = '',
  color = 'error',
  cancel = '',
  loading = false,
}: {
  onConfirm: EventHandler<any>;
  onCancel: EventHandler<any>;
  title: string | React.ReactNode;
  message: string | React.ReactNode;
  confirm?: string | React.ReactNode;
  color?: string;
  cancel?: boolean | string | React.ReactNode;
  loading?: boolean;
}) {
  const { t } = useLocaleContext();

  return (
    <Confirm
      open
      title={title}
      onConfirm={onConfirm}
      onCancel={onCancel}
      confirmButton={{
        text: confirm || t('common.confirm'),
        props: { color: color as any, size: 'small', variant: 'contained', disabled: !!loading },
      }}
      cancelButton={{ text: cancel || t('common.cancel'), props: { color: 'inherit', size: 'small' } }}
      showCancelButton={typeof cancel !== 'boolean' || !!cancel}>
      <Box>{message}</Box>
    </Confirm>
  );
}