import CustomModal from '@/components/CustomModal';
import Button from '@/components/ui/Button';
import style from './index.module.scss';

interface Modal1Props {
  show?: boolean;
  handleClose?: () => void;
  handleYesClick?: () => void;
  handleNoClick?: () => void;
  YesButtonText?: string;
  NoButtonText?: string;
  title?: string;
  description?: string;
}

const Modal1 = ({
  show,
  handleClose,
  handleYesClick,
  handleNoClick,
  YesButtonText = 'Yes',
  NoButtonText = 'No',
  title = 'Payment Request',
  description = 'Are you sure you want to request a payment?',
}: Modal1Props) => {
  // Handle "Yes" button click
  const handleYes = () => {
    if (handleYesClick) {
      handleYesClick(); // Execute the provided Yes handler
    }
    if (handleClose) {
      handleClose(); // Close the modal after the action
    }
  };

  // Handle "No" button click
  const handleNo = () => {
    if (handleNoClick) {
      handleNoClick(); // Execute the provided No handler
    }
    if (handleClose) {
      handleClose(); // Close the modal after the action
    }
  };

  return (
    <CustomModal show={show} handleClose={handleClose}>
      <div className={style.modalContent}>
        <h3 className="text-center fw-bold">{title}</h3>
        <h4 className="text-light-grey-2 my-4 fs-6 text-center">
          {description}
        </h4>
        <div className="d-flex my-4 justify-content-center align-items-center gap-2">
          <Button
            onClick={handleNo}
            className="btn btn-outline-dark rounded-pill"
            size="md"
          >
            {NoButtonText}
          </Button>
          <Button
            onClick={handleYes}
            className="btn btn-feature rounded-pill"
            size="md"
          >
            {YesButtonText}
          </Button>
        </div>
      </div>
    </CustomModal>
  );
};

export default Modal1;