import { useEffect, useState } from 'react';
import Confetti from 'react-confetti';
import { Notification } from "../../Notification/Notification";
import { Button } from "../../../Base/Buttons/Button";

export const Success = () => {
  const response = {
    title: 'Success!!!',
    type: 'success',
    msg: 'Successfully booked your ticket!',
  };

  const [showConfetti, setShowConfetti] = useState(true);
  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    const timer = setTimeout(() => {
      setShowConfetti(false);
    }, 20000);

    return () => clearTimeout(timer);
  }, []);

  const handleSuccess = () => {
    window.location.replace('/select-seat');
  };

  return (
    <>
      {showConfetti && (
        <Confetti width={windowSize.width} height={windowSize.height} />
      )}

      <Notification {...response} button={<Button  variant="secondary"
      label="Book more seats"
      size="md" onClick={handleSuccess}/>}/>

      <div
        style={{ display: "flex", justifyContent: "center", marginTop: "1rem" }}
        onClick={handleSuccess}
      >

      </div>
    </>
  );
};
