"use client";

import { useEffect, useState } from "react";

interface CountDownProps {
  targetDate: string;
  className?: string;
}

export default function CountDown({ targetDate, className = "time-countdown-two" }: CountDownProps) {
  const [remaining, setRemaining] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    const target = new Date(targetDate).getTime();
    const tick = () => {
      const now = Date.now();
      let diff = Math.max(0, Math.floor((target - now) / 1000));
      const days = Math.floor(diff / 86400);
      diff -= days * 86400;
      const hours = Math.floor(diff / 3600);
      diff -= hours * 3600;
      const minutes = Math.floor(diff / 60);
      const seconds = diff % 60;
      setRemaining({ days, hours, minutes, seconds });
    };
    tick();
    const interval = setInterval(tick, 1000);
    return () => clearInterval(interval);
  }, [targetDate]);

  return (
    <ul className={className}>
      <li>
        <div className="box">
          <span className="days">{remaining.days}</span>
          <span className="timeRef">days</span>
        </div>
      </li>
      <li>
        <div className="box">
          <span className="hours">{remaining.hours}</span>
          <span className="timeRef clr-1">hours</span>
        </div>
      </li>
      <li>
        <div className="box">
          <span className="minutes">{remaining.minutes}</span>
          <span className="timeRef clr-2">minutes</span>
        </div>
      </li>
      <li>
        <div className="box">
          <span className="seconds">{remaining.seconds}</span>
          <span className="timeRef clr-3">seconds</span>
        </div>
      </li>
    </ul>
  );
}