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

'use client';

interface GrandPrizeProps {
  prizeAmount?: string;
  drawDate?: Date;
  participantsCount?: number;
}

export default function GrandPrize({
  prizeAmount = "360€",
  drawDate,
  participantsCount,
}: GrandPrizeProps) {
  const formatDate = (date: Date) => {
    return date.toLocaleDateString('fr-FR', {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });
  };

  return (
    <div className="bg-gradient-to-br from-[#fff8e8] via-[#fff4d9] to-[#ffefc4] rounded-2xl shadow-xl p-8 border-2 border-[#d4a574] mt-8">
      <div className="flex items-start gap-6">
        {/* Icône trophée */}
        <div className="flex-shrink-0">
          <div className="bg-white rounded-full p-4 shadow-lg">
            <svg className="w-12 h-12 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
          </div>
        </div>

        {/* Contenu */}
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-3">
            <h3 className="text-3xl font-bold text-gray-900">
              🎉 Grand Prix à gagner !
            </h3>
          </div>

          <p className="text-lg text-[#5a5a4e] mb-4 leading-relaxed">
            À la fin du concours, un grand gagnant sera tiré au sort parmi les participants et remportera un{' '}
            <span className="font-bold text-[#8b6f47] text-xl">lot d'une valeur de {prizeAmount}</span> !
          </p>

          <div className="bg-white/70 backdrop-blur-sm rounded-xl p-4 space-y-2">
            {drawDate && (
              <div className="flex items-center gap-3">
                <svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                </svg>
                <span className="text-[#5a5a4e]">
                  <span className="font-semibold">Tirage au sort :</span> {formatDate(drawDate)}
                </span>
              </div>
            )}

            {participantsCount && (
              <div className="flex items-center gap-3">
                <svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                </svg>
                <span className="text-[#5a5a4e]">
                  <span className="font-semibold">{participantsCount.toLocaleString('fr-FR')}</span> participants déjà inscrits
                </span>
              </div>
            )}

            <div className="flex items-center gap-3">
              <svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              <span className="text-[#5a5a4e]">
                Tirage certifié par un huissier de justice
              </span>
            </div>
          </div>

          <div className="mt-4 flex items-center gap-2 text-sm text-[#8a8a7a]">
            <svg className="w-4 h-4 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
            </svg>
            <span className="italic">Plus vous jouez, plus vous avez de chances de gagner !</span>
          </div>
        </div>
      </div>
    </div>
  );
}