'use client';

interface GamePeriodProps {
  purchaseStartDate: Date;
  purchaseEndDate: Date;
  gameStartDate: Date;
  gameEndDate: Date;
}

export default function GamePeriod({
  purchaseStartDate,
  purchaseEndDate,
  gameStartDate,
  gameEndDate,
}: GamePeriodProps) {
  const formatDate = (date: Date) => {
    return date.toLocaleDateString('fr-FR', {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });
  };

  return (
    <div className="grid md:grid-cols-2 gap-6 mt-8">
      {/* Période d'achat */}
      <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#f59e0b] hover:shadow-xl transition-shadow">
        <div className="flex items-start gap-4">
          <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] rounded-full p-4 flex-shrink-0">
            <svg className="w-8 h-8 text-[#f59e0b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
          </div>
          <div className="flex-1">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">Période d'achat</h3>
            <p className="text-gray-600 mb-4">
              Achetez vos tickets de 49€ en boutique et obtenez votre code de participation
            </p>
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                </svg>
                <span className="text-gray-700">
                  <span className="font-semibold">Du</span> {formatDate(purchaseStartDate)}
                </span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                </svg>
                <span className="text-gray-700">
                  <span className="font-semibold">Au</span> {formatDate(purchaseEndDate)}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Période de jeu */}
      <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#1a4d2e] hover:shadow-xl transition-shadow">
        <div className="flex items-start gap-4">
          <div className="bg-gradient-to-br from-[#d1fae5] to-[#a7f3d0] rounded-full p-4 flex-shrink-0">
            <svg className="w-8 h-8 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div className="flex-1">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">Période de jeu</h3>
            <p className="text-gray-600 mb-4">
              Utilisez vos tickets pour jouer et découvrir vos lots instantanément
            </p>
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                </svg>
                <span className="text-gray-700">
                  <span className="font-semibold">Du</span> {formatDate(gameStartDate)}
                </span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                </svg>
                <span className="text-gray-700">
                  <span className="font-semibold">Au</span> {formatDate(gameEndDate)}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}