import { useEffect, useState } from "react";

const useCountdown = (targetDate) => {
  const countDownDate = new Date(targetDate).getTime();
  const delta = countDownDate - new Date().getTime();
  const [countDown, setCountDown] = useState(delta);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountDown(countDownDate - new Date().getTime());
    }, 1000);

    const time = convertValue(countDown);
    const stopTimer = time.every((item) => item === "0");
    if (stopTimer) {
      clearInterval(interval);
    }

    return () => clearInterval(interval);
  }, [countDownDate, countDown]);

  return convertValue(countDown);
};

const convertValue = (countDown) => {
  const days = String(Math.floor(countDown / (1000 * 60 * 60 * 24))).padStart(
    1,
    "0"
  );
  const hours = String(
    Math.floor((countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  ).padStart(2, "0");
  const minutes = String(
    Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
  ).padStart(2, "0");
  const seconds = String(Math.floor((countDown % (1000 * 60)) / 1000)).padStart(
    2,
    "0"
  );

  return [days, hours, minutes, seconds];
};

import useCountdown from "./useCountdown";

const App = () => {
  const targetDate = "01/01/2023 00:00:00";
  const [days, hours, minutes, seconds] = useCountdown(targetDate);

  return (
    <>
        <p><{`There are ${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds, left until your target date & time`}</p>
    </>
  );
};