From 0a3066d3986051775269cabdc895717d9f8b2945 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Wed, 11 Dec 2024 18:14:14 +0500
Subject: [PATCH] LotteryCountDown reafactored

---
 .../lottery/countDown/LotteryCountDown.tsx    | 101 ++++++++----------
 1 file changed, 46 insertions(+), 55 deletions(-)

diff --git a/components/lottery/countDown/LotteryCountDown.tsx b/components/lottery/countDown/LotteryCountDown.tsx
index 22d1bf4..5c21de3 100644
--- a/components/lottery/countDown/LotteryCountDown.tsx
+++ b/components/lottery/countDown/LotteryCountDown.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { calculateTimeLeft } from '@/lib/hooks/useCalculateTimeLeft';
 import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
 interface LotteryCountDownProps {
@@ -21,22 +22,6 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
     seconds: 0,
   });
 
-  const calculateTimeLeft = (targetDate: string) => {
-    const now = new Date();
-    const eventDate = new Date(targetDate); // Parse target date directly
-    const timeDifference = eventDate.getTime() - now.getTime();
-
-    if (timeDifference <= 0) {
-      return { hours: 0, minutes: 0, seconds: 0 }; // Countdown finished
-    }
-
-    const hours = Math.floor(timeDifference / (1000 * 60 * 60));
-    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
-
-    return { hours, minutes, seconds };
-  };
-
   useEffect(() => {
     const timer = setInterval(() => {
       if (lotteryStatus === 'not-started') {
@@ -60,57 +45,63 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
   }, [startDate, endDate, lotteryStatus, setLotteryStatus]);
 
   return (
-    <div className="bg-lightPrimaryContainer sm:pb-4 pb-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
+    <div className="bg-lightPrimaryContainer sm:p-6 p-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
+      <h3 className="text-center font-heading-1-regular text-lightOnSurface">
+        {lotteryStatus === 'started'
+          ? 'Bije dowam edýär'
+          : lotteryStatus === 'ended'
+          ? 'Bije tamamlandy'
+          : 'Bije'}
+      </h3>
       {/* LotteryCountDown */}
-      <div className="flex items-center sm:gap-6 gap-2 justify-between">
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
-            {timeLeft.hours}
-          </h3>
-          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-            hours
-          </h4>
-        </div>
+      {lotteryStatus === 'not-started' && (
+        <div className="flex items-center sm:gap-6 gap-2 justify-between">
+          <div className="flex flex-col items-center justify-center flex-1 p-6">
+            <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
+              {timeLeft.hours}
+            </h3>
+            <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
+              hours
+            </h4>
+          </div>
 
-        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-        </div>
+          <div className="flex flex-col gap-3">
+            <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
+            <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
+          </div>
 
-        <div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3">
-          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
-            {timeLeft.minutes}
-          </h3>
-          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-            minutes
-          </h4>
-        </div>
+          <div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3">
+            <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
+              {timeLeft.minutes}
+            </h3>
+            <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
+              minutes
+            </h4>
+          </div>
 
-        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-        </div>
+          <div className="flex flex-col gap-3">
+            <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
+            <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
+          </div>
 
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
-            {timeLeft.seconds}
-          </h3>
-          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-            seconds
-          </h4>
+          <div className="flex flex-col items-center justify-center flex-1 p-6">
+            <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
+              {timeLeft.seconds}
+            </h3>
+            <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
+              seconds
+            </h4>
+          </div>
         </div>
-      </div>
-
-      {/* Separator */}
-      <div className="w-full bg-lightPrimaryOutline h-[1px]"></div>
+      )}
 
       <div className="flex items-center justify-center text-lightOnSurfaceVariant md:font-heading-1-regular md:text-[20px] sm:text-[18px] sm:leading-[28px] text-[14px] leading-[20px]">
         <span>
           {lotteryStatus === 'not-started'
             ? '- den başlar'
             : lotteryStatus === 'started'
-            ? '- den gutatar'
-            : 'gutardy'}
+            ? 'girmek üçin aşakda kodyňyzy giriziň'
+            : 'netijeleri görmek üçin aşakda kodyňyzy giriziň'}
         </span>
       </div>
     </div>