import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import Lottie from 'lottie-react';
import Modal from '../../Shared/Modal/Index';
import Button from '../../Base/Button/Index';
import animationData from '../../../assets/successSvg.json';
import styles from './styles.module.css';

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 && <h3>Booked Successfully</h3>}
        </div>
        <Lottie
          className={styles.lottieSvg}
          animationData={animationData}
          loop={false}
          autoplay={true}
        />
        {showMessage && (
          <div className={styles['btn-wrapper']}>
            <Button size={'md'} onClick={onConfirm}>
              Edit Seats
            </Button>
          </div>
        )}
      </div>
    </Modal>
  );
};

export default SuccessModal;

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