import PropTypes from 'prop-types';
import Lottie from 'lottie-react';
import animationData from '../../../successSvg.json';
import Modal from '../../Shared/Modal/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
import { useEffect, useState } from 'react';
const SuccessModal = ({ onConfirm }) => {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowMessage(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);
  return (
    <Modal>
      <div className={styles['content-wrapper']}>
        <div className={styles['btn-wrapper']}>
          {showMessage && <p>Booked Successfully</p>}
        </div>
        <Lottie
          className={styles.lottieSvg}
          animationData={animationData}
          loop={false}
          autoplay={true}
        />
        <div className={styles['btn-wrapper']}>
          <Button size={'md'} onClick={onConfirm}>
            Go Back
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default SuccessModal;

SuccessModal.propTypes = {
  onConfirm: PropTypes.func.isRequired
};
