'use client';

interface SuccessScreenProps {
  onRestart: () => void;
  totalQuestions: number;
}

export default function SuccessScreen({ onRestart, totalQuestions }: SuccessScreenProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 backdrop-blur-sm p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full p-8 text-center animate-slide-up">
        <div className="mb-6">
          <div className="w-24 h-24 mx-auto bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center animate-pulse-green">
            <svg
              className="w-12 h-12 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={3}
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
        </div>

        <h2 className="text-3xl font-bold text-gray-900 mb-3">
          موفقیت‌آمیز!
        </h2>

        <p className="text-lg text-gray-600 mb-6">
          تبریک! شما با موفقیت به تمام {totalQuestions} سوال پاسخ صحیح دادید.
        </p>

        <button onClick={onRestart} className="btn-primary w-full text-lg">
          شروع مجدد آزمون
        </button>
      </div>
    </div>
  );
}