
import React, { useEffect, useState } from "react";
import moment from "moment";


const TimerCard = ({ time }) => {
  const date = moment().format("YYYY-MM-DD")
  const date2 = moment("2023-04-21")
  const nowDate = moment().format("Do MMMM")
  const targetTime = moment(`${date} ${time}:00`);
  const [currentTime, setCurrentTime] = useState(moment());
  const timer = moment();
  const timeBetween = moment.duration(targetTime.diff(currentTime));
  const timeBetween2 = moment.duration(date2.diff(timer))
  const dayCount = 29 - timeBetween2.days();
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(moment());
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <>
      <div className="flex gap-4 justify-between w-full mt-5">
        <div className="w-40">
          <div className="text-3xl leading-8 font-bold text-[#182B69] flex justify-center "> {nowDate}</div>
          <div className="text-base leading-4 text-[#182B69] text-center ">{dayCount}. günü</div>
        </div>
        <div className="text-center  w-40">
          <div className="text-sm font-bold text-[#182B69] mb-1 ">için iftara kalan süre</div>
          <div className="text-2xl leading-4 font-bold text-[#182B69]">{timeBetween.hours()} &nbsp;: {timeBetween.minutes()} &nbsp;: {timeBetween.seconds()}

          </div>
          <div className="text-xs leading-3 mt-1">sa &nbsp; &nbsp; &nbsp; &nbsp; sn &nbsp; &nbsp; &nbsp; &nbsp; dk</div>

        </div>
      </div>
    </>
  );
};
export default TimerCard;
