import { useEffect, useState } from 'react'

const CountDown2 = ({ initialTime }) => {
  /*const hours = Math.floor(initialTime / 3600)
  const minutes = Math.floor((initialTime % 3600) / 60)
  const seconds = initialTime % 60

  const [timeLeft, setTimeLeft] = useState({
    hour: hours,
    minute: minutes,
    second: seconds
  })

  useEffect(() => {
    const timer = setInterval(() => {
      const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
      const secondsLeft = totalSeconds - 1
      if (secondsLeft < 0) {
        clearInterval(timer)
      } else {
        const hours = Math.floor(secondsLeft / 3600)
        const minutes = Math.floor((secondsLeft % 3600) / 60)
        const seconds = secondsLeft % 60
        setTimeLeft({ hour: hours, minute: minutes, second: seconds })
      }
    }, 1000)
    return () => clearInterval(timer)
  }, [timeLeft])*/
  
  const days = Math.floor(initialTime / 86400)
  const hours = Math.floor((initialTime % 86400) / 3600)
  const minutes = Math.floor((initialTime % 3600) / 60)
  const seconds = initialTime % 60

  const [timeLeft, setTimeLeft] = useState({
    day: days,
    hour: hours,
    minute: minutes,
    second: seconds
  })

  useEffect(() => {
    const timer = setInterval(() => {
      const totalSeconds =
        timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
      const secondsLeft = totalSeconds - 1
      if (secondsLeft < 0) {
        clearInterval(timer)
      } else {
        const days = Math.floor(secondsLeft / 86400)
        const hours = Math.floor((secondsLeft % 86400) / 3600)
        const minutes = Math.floor((secondsLeft % 3600) / 60)
        const seconds = secondsLeft % 60
        setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds })
      }
    }, 1000)
    return () => clearInterval(timer)
  }, [timeLeft])


  return (
    <div className='flex justify-between gap-x-2 mt-18'>
      <div className='flex flex-col items-center'>
        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
          {timeLeft.day.toString().padStart(2, '0')}
        </span>
        <span className='text-xs text-white'>Hari</span>
      </div>
      <div className='flex flex-col items-center'>
        <span className='bg-yellow-400 border border-yellow-400 text-black  font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
          {timeLeft.hour.toString().padStart(2, '0')}
        </span>
        <span className='text-xs text-white'>Jam</span>
      </div>
      <div className='flex flex-col items-center'>
        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
          {timeLeft.minute.toString().padStart(2, '0')}
        </span>
        <span className='text-xs text-white'>Menit</span>
      </div>
    </div>
  )
}

export default CountDown2
