import { Button } from '@tarojs/components';

import { Dialog } from '@taroify/core';
import classNames from 'classnames';
import { PropsWithChildren } from 'react';

import './index.less';

interface IProps extends PropsWithChildren {
  visible: boolean;
  content: string;
  onClose?: () => void;
  className?: string;
  confirm?: string;
  cancel?: string;
  onClick?: () => void;
  onCancel?: () => void;
}

const PREFIX = 'common-dialog';

function CommonDialog(props: IProps) {
  const { visible, content, confirm, cancel, className, children, onClose, onClick, onCancel } = props;

  return (
    <Dialog className={classNames(PREFIX, className)} open={visible} onClose={onClose}>
      <Dialog.Content>
        <div className={`${PREFIX}__container`}>
          <div className={`${PREFIX}__title`}>{content}</div>
          {children}
          {confirm && (
            <Button className={`${PREFIX}__confirm-button`} onClick={onClick}>
              {confirm}
            </Button>
          )}
          {cancel && (
            <Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
              {cancel}
            </Button>
          )}
        </div>
      </Dialog.Content>
    </Dialog>
  );
}

export default CommonDialog;
