"use client";
import React, { useState, useEffect } from "react";

const CountdownUnit = ({ value, label }) => (
  <div className="flex flex-col items-center mr-2 sm:mr-4">
    <div className="text-2xl sm:text-xl md:text-xl font-bold mb-1 sm:mb-2 w-[50px] flex justify-center px-2 sm:px-4 py-1 sm:py-2 rounded bg-gradient-to-r from-[#96724f] to-yellow-700">
      {value !== undefined ? value : "0"}{" "}
      {/* Display '0' if value is undefined */}
    </div>
    <div className="text-xs sm:text-sm uppercase">{label}</div>
  </div>
);

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 (
    <div className="flex text-white">
      {timeLeft &&
        timeUnits.map(({ key, label }) => (
          <CountdownUnit key={key} value={timeLeft[key]} label={label} />
        ))}
    </div>
  );
};

const HeroTwo = () => {
  return (
    <div className="w-full h-[70vh] mx-auto relative flex justify-center items-center sm:my-14 my-9">
      <div
        className="mx-auto h-[90%] max-w-7xl bg-cover bg-center bg-no-repeat flex flex-col sm:flex-row justify-center sm:justify-end items-center relative"
        style={{ backgroundImage: `url('/diwali.jpg')` }}
      >
        <div className="absolute inset-0 bg-black opacity-20"></div>
        <div className="flex flex-col sm:flex-row justify-between items-center w-full relative z-10 px-4 sm:px-8">
          {/* left count down */}
          <div className="w-full sm:w-1/2 flex flex-col items-center sm:items-start mb-8 sm:mb-0">
            <h1 className="text-xl sm:text-2xl text-white mb-2 sm:mb-4">
              SHOP BEFORE
            </h1>
            <Countdown targetDate="2024-30-26T00:00:00" />
          </div>
          {/* right banner text content */}
          <div className="w-full sm:w-[45%] text-zinc-50 p-4 rounded text-center sm:text-left">
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white my-3">
              Celebrate Diwali with Early Access
            </h1>
            <p className="my-4 text-sm sm:text-base md:text-lg">
              Place your orders by September 26th to receive your items in time
              for Navaratri. Dive into the festive season with our exclusive
              products!
            </p>
            <h2 className="mb-3 text-sm sm:text-base">
              GUARANTEED DELIVERY BEFORE NAVARATRI
            </h2>
            <button className="px-3 py-2 text-lg sm:text-xl bg-gradient-to-r from-[#96724f] to-yellow-700">
              Shop Now
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeroTwo;
