1  import { useEffect, useState } from "react";
 2  
 3  // src/components/Countdown.tsx
 4  const TimeBox = ({ value, label }: { value: string; label: string }) => (
 5    <div className="glass-container w-[70px] h-[90px] sm:w-[90px] sm:h-[100px] md:w-[122px] md:h-[117px] flex flex-col items-center justify-center rounded-md text-white">
 6      <span className="text-[20px] sm:text-[35px] lg:text-[48px] leading-10 font-mono font-[700]">{value}</span>
 7      <span className="lg:text-[20px] font-space capitalize">{label}</span>
 8    </div>
 9  );
10  
11  export default function Countdown() {
12    const [timeLeft, setTimeLeft] = useState({
13      days: 0,
14      hours: 0,
15      mins: 0,
16      secs: 0
17    });
18  
19    useEffect(() => {
20      const calculateTimeLeft = () => {
21        const now = new Date();
22        const currentYear = now.getFullYear();
23        const targetDate = new Date(currentYear, 7, 18); // August is month 7 (0-indexed)
24        
25        // If August 8 has already passed this year, set it for next year
26        if (now > targetDate) {
27          targetDate.setFullYear(currentYear + 1);
28        }
29  
30        const difference = targetDate.getTime() - now.getTime();
31        
32        if (difference > 0) {
33          const days = Math.floor(difference / (1000 * 60 * 60 * 24));
34          const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
35          const mins = Math.floor((difference / 1000 / 60) % 60);
36          const secs = Math.floor((difference / 1000) % 60);
37  
38          setTimeLeft({ days, hours, mins, secs });
39        }
40      };
41  
42      // Calculate immediately
43      calculateTimeLeft();
44      
45      // Then update every second
46      const timer = setInterval(calculateTimeLeft, 1000);
47  
48      return () => clearInterval(timer);
49    }, []);
50    return (
51      <div className="flex space-x-4 mt-14">
52        <TimeBox value={timeLeft.days.toString().padStart(2, '0')} label="days" />
53        <TimeBox value={timeLeft.hours.toString().padStart(2, '0')} label="hours" />
54        <TimeBox value={timeLeft.mins.toString().padStart(2, '0')} label="mins" />
55        <TimeBox value={timeLeft.secs.toString().padStart(2, '0')} label="secs" />
56      </div>
57    );
58  }