"use client";
import React, { useState, useEffect } from "react";
const CountdownUnit = ({ value, label }) => (
{value !== undefined ? value : "0"}{" "}
{/* Display '0' if value is undefined */}
{label}
);
const Countdown = ({ targetDate }) => {
const [timeLeft, setTimeLeft] = useState(null); // Start with null
useEffect(() => {
const calculateTimeLeft = () => {
const difference = +new Date(targetDate) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
return timeLeft;
};
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
// Initial calculation
setTimeLeft(calculateTimeLeft());
return () => clearInterval(timer);
}, [targetDate]);
const timeUnits = [
{ key: "days", label: "Days" },
{ key: "hours", label: "Hours" },
{ key: "minutes", label: "Min" },
{ key: "seconds", label: "Sec" },
];
return (
{timeLeft &&
timeUnits.map(({ key, label }) => (
))}
);
};
const HeroTwo = () => {
return (
{/* left count down */}
SHOP BEFORE
{/* right banner text content */}
Celebrate Diwali with Early Access
Place your orders by September 26th to receive your items in time
for Navaratri. Dive into the festive season with our exclusive
products!
GUARANTEED DELIVERY BEFORE NAVARATRI
);
};
export default HeroTwo;