
import React, { useEffect, useState } from 'react'
import Popup from './Popup';
import useStore from '@/lib/store';

export default function Notifications({data}:{data:string[]}) {

  const [isPopup1Open, setIsPopup1Open] = useState(true);
  const [isPopup2Open, setIsPopup2Open] = useState(true);
  const [isPopup3Open, setIsPopup3Open] = useState(true);
  const [isPopup4Open, setIsPopup4Open] = useState(true);
  const tutorial = useStore((s)=>s.tutorial)

  useEffect(()=>{
    if(!tutorial){
      setTimeout(()=>{
        setIsPopup1Open(false)
        setIsPopup2Open(false)
        setIsPopup3Open(false)
        setIsPopup4Open(false)
      }, 5000)
    }
  }, [tutorial])
  
  return (
    <React.Fragment>      
      <div id='notifications' className='absolute bottom-[104px] left-4 z-5'>
        <div className='flex flex-col gap-2 w-[200px] h-auto'>
          <Popup isOpen={isPopup1Open} onClose={setIsPopup1Open}><div>{data[0]}</div></Popup>
          <Popup isOpen={isPopup2Open} onClose={setIsPopup2Open}><div>{data[1]}</div></Popup>
          <Popup isOpen={isPopup3Open} onClose={setIsPopup3Open}><div>{data[2]}</div></Popup>
          {/* <Popup isOpen={isPopup4Open} onClose={setIsPopup4Open}><div>{data[3]}</div></Popup> */}
        </div>
      </div>
    </React.Fragment>
  )
}