/* eslint-disable spellcheck/spell-checker */
import React from 'react';
import { Button, Modal, Typography } from 'antd';

const { Text } = Typography;

interface IConfirmUpdateModalProps {
  open: boolean;
  loading?: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}

const ConfirmUpdateModal: React.FC<IConfirmUpdateModalProps> = ({
  open,
  loading = false,
  onCancel,
  onConfirm,
}) => {
  return (
    <Modal
      open={open}
      onCancel={onCancel}
      closable
      centered
      maskClosable={false}
      footer={null}
      width={500}
      className="custom-new-modal"
    >
      <div
        style={{
          textAlign: 'center',
          padding: '12px 8px',
        }}
      >
        {/* Warning Icon */}
        <div
          style={{
            width: 80,
            height: 80,
            borderRadius: '50%',
            border: '3px solid #f5b97d',
            margin: '0 auto 20px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 42,
            color: '#f5b97d',
            fontWeight: 500,
          }}
        >
          !
        </div>

        {/* Title */}
        <Text
          strong
          style={{
            fontSize: 20,
            display: 'block',
            marginBottom: 10,
            color: '#1f4e79',
          }}
        >
          Confirm Transfer
        </Text>

        {/* Message */}
        <Text
          style={{
            fontSize: 15,
            color: '#595959',
            display: 'block',
            lineHeight: 1.6,
            marginBottom: 24,
          }}
        >
          Please confirm that the selected options are correct before
          proceeding with the self lead transfer.
        </Text>

        {/* Buttons */}
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            gap: 12,
          }}
        >
          <Button key="cancel" onClick={onCancel} disabled={loading}>
            Cancel
          </Button>

          <Button
            key="confirm"
            type="primary"
            loading={loading}
            onClick={onConfirm}
            style={{
              background: '#198754',
              borderColor: '#198754',
            }}
          >
            Yes, Proceed
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default ConfirmUpdateModal;