turkmentv_front/components/vote/Countdown.tsx

import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { differenceInSeconds, parseISO, addHours } from "date-fns";
import GradientTitle from "./GradientTitle";

interface CountdownProps {
  startsAt: string;
  endsAt: string;
  setVoteStatus: Dispatch<SetStateAction<string | undefined>>;
  setEventStatus: Dispatch<SetStateAction<string>>;
  eventStatus: string;
}

const Countdown: React.FC<CountdownProps> = ({
  startsAt,
  endsAt,
  setVoteStatus,
  setEventStatus,
  eventStatus,
}) => {
  const [timeLeft, setTimeLeft] = useState<string>("");

  useEffect(() => {
    // Parsing the start and end times to Date objects in the correct format
    const startsAtDate = addHours(parseISO(startsAt.replace(" ", "T")), 5); // Adjusting start time to UTC+5
    const endsAtDate = addHours(parseISO(endsAt.replace(" ", "T")), 5); // Adjusting end time to UTC+5

    // Function to calculate time left
    const calculateTimeLeft = () => {
      const now = new Date();
      const nowUTC5 = addHours(now, 5); // Adjusting current time to UTC+5

      let difference;
      if (nowUTC5 < startsAtDate) {
        setEventStatus("Not started");
        difference = differenceInSeconds(startsAtDate, nowUTC5);
      } else if (nowUTC5 < endsAtDate) {
        setEventStatus("Started");
        difference = differenceInSeconds(endsAtDate, nowUTC5);
      } else {
        setEventStatus("Finished");
        setVoteStatus("closed");
        return;
      }

      const hours = Math.floor(difference / 3600);
      const minutes = Math.floor((difference % 3600) / 60);
      const seconds = difference % 60;

      setTimeLeft(
        `${hours < 10 ? "0" + hours : hours}:${
          minutes < 10 ? "0" + minutes : minutes
        }:${seconds < 10 ? "0" + seconds : seconds}`
      );
    };

    const timer = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(timer);
  }, [startsAt, endsAt]);

  return (
    <div>
      {eventStatus === "Finished" ? (
        <GradientTitle title={"Netijeler"} size="big" />
      ) : eventStatus === "Started" ? (
        <div className="flex flex-col justify-center items-center">
          <div className="text-[44px] sm:text-[100px] leading-[100%] flex items-end font-bold bg-fancyTitle bg-clip-text text-transparent text-center">
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[0]}
            </h2>
            :
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[1]}
            </h2>
            :
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[2]}
            </h2>
          </div>
        </div>
      ) : eventStatus === "Not started" ? (
        <div className="flex flex-col justify-center items-center">
          <h1 className="font-semibold text-[24px] uppercase text-fillNavyBlue">
            Ses bermeklik
          </h1>
          <div className="text-[44px] sm:text-[100px] leading-[100%] flex items-end font-bold bg-fancyTitle bg-clip-text text-transparent text-center">
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[0]}
            </h2>
            :
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[1]}
            </h2>
            :
            <h2 className="flex flex-col items-center justify-center">
              {timeLeft.split(":")[2]}
            </h2>
          </div>
          <h1 className="font-semibold text-[24px] uppercase text-fillNavyBlue mt-[16px]">
            sagatdan başlaýar
          </h1>
        </div>
      ) : null}
    </div>
  );
};

export default Countdown;