import { useState, useEffect } from "react";
import { Clock } from "lucide-react";

interface CountdownTimerProps {
  targetDate: string;
}

export const CountdownTimer = ({ targetDate }: CountdownTimerProps) => {
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const calculateTimeLeft = () => {
      const difference = +new Date(targetDate) - +new Date();
      
      if (difference > 0) {
        setTimeLeft({
          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)
        });
      }
    };

    calculateTimeLeft();
    const timer = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(timer);
  }, [targetDate]);

  return (
    <div className="bg-gradient-to-r from-red-500 to-red-600 text-white py-3 px-4 text-center animate-fade-in">
      <div className="max-w-6xl mx-auto flex items-center justify-center gap-4 flex-wrap">
        <div className="flex items-center gap-2">
          <Clock className="h-5 w-5 animate-pulse" />
          <span className="font-semibold">Next Weekly Award in:</span>
        </div>
        
        <div className="flex items-center gap-1 text-sm sm:text-base">
          <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
            <div className="font-bold text-lg leading-tight">{timeLeft.days}</div>
            <div className="text-xs uppercase tracking-wide opacity-90">Days</div>
          </div>
          <span className="text-xl font-bold mx-1">:</span>
          <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
            <div className="font-bold text-lg leading-tight">{timeLeft.hours}</div>
            <div className="text-xs uppercase tracking-wide opacity-90">Hours</div>
          </div>
          <span className="text-xl font-bold mx-1">:</span>
          <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
            <div className="font-bold text-lg leading-tight">{timeLeft.minutes}</div>
            <div className="text-xs uppercase tracking-wide opacity-90">Min</div>
          </div>
          <span className="text-xl font-bold mx-1">:</span>
          <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
            <div className="font-bold text-lg leading-tight animate-pulse">{timeLeft.seconds}</div>
            <div className="text-xs uppercase tracking-wide opacity-90">Sec</div>
          </div>
        </div>
        
        <span className="text-sm font-medium bg-white/20 rounded-full px-3 py-1">
          🎯 Don't miss out!
        </span>
      </div>
    </div>
  );
};