the-tip-top-frontend/components/CountdownTimer.tsx

'use client';

import { useEffect, useState } from 'react';

interface CountdownTimerProps {
  endDate: Date;
  title?: string;
}

export default function CountdownTimer({ endDate, title = "Période de jeu" }: CountdownTimerProps) {
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const calculateTimeLeft = () => {
      const now = new Date().getTime();
      const end = endDate.getTime();
      const difference = end - now;

      if (difference > 0) {
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);

        setTimeLeft({ days, hours, minutes, seconds });

        // Calcul du pourcentage écoulé (exemple: 30 jours de concours)
        const totalDuration = 30 * 24 * 60 * 60 * 1000; // 30 jours en ms
        const elapsed = totalDuration - difference;
        const progressPercent = Math.min(Math.max((elapsed / totalDuration) * 100, 0), 100);
        setProgress(progressPercent);
      } else {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
        setProgress(100);
      }
    };

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

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

  return (
    <div className="bg-gradient-to-br from-[#f5f5f0] to-[#faf9f5] rounded-2xl shadow-lg p-8 border border-[#e5e4dc]">
      <div className="text-center mb-6">
        <h3 className="text-2xl font-bold text-[#5a5a4e] mb-2">{title}</h3>
        <p className="text-[#8a8a7a]">Utilisez vos tickets pour jouer et gagner des lots !</p>
      </div>

      {/* Compteur principal */}
      <div className="mb-6">
        <div className="text-center mb-4">
          <div className="inline-flex items-baseline gap-2">
            <span className="text-6xl font-bold text-[#d4a574]">
              {timeLeft.days}
            </span>
            <span className="text-2xl font-semibold text-[#8a8a7a]">
              jour{timeLeft.days !== 1 ? 's' : ''}
            </span>
          </div>
          <div className="text-sm text-[#a0a098] mt-2">restants</div>
        </div>

        {/* Détails temps */}
        <div className="flex justify-center gap-4 mb-4">
          <div className="text-center">
            <div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
              <div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.hours).padStart(2, '0')}</div>
              <div className="text-xs text-[#8a8a7a]">heures</div>
            </div>
          </div>
          <div className="flex items-center text-[#c4c4b8]">:</div>
          <div className="text-center">
            <div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
              <div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.minutes).padStart(2, '0')}</div>
              <div className="text-xs text-[#8a8a7a]">minutes</div>
            </div>
          </div>
          <div className="flex items-center text-[#c4c4b8]">:</div>
          <div className="text-center">
            <div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
              <div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.seconds).padStart(2, '0')}</div>
              <div className="text-xs text-[#8a8a7a]">secondes</div>
            </div>
          </div>
        </div>

        {/* Barre de progression */}
        <div className="relative">
          <div className="w-full bg-[#e5e4dc] rounded-full h-3 overflow-hidden">
            <div
              className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] h-3 rounded-full transition-all duration-1000 ease-out"
              style={{ width: `${progress}%` }}
            ></div>
          </div>
          <div className="flex justify-between mt-2 text-sm text-[#8a8a7a]">
            <span>Début du concours</span>
            <span className="font-semibold">{Math.round(progress)}% écoulé</span>
          </div>
        </div>
      </div>
    </div>
  );
}