Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { motion } from 'framer-motion';
import { Trophy, DollarSign, User, CheckCircle, Star } from 'lucide-react';

interface Winner {
  id: string;
  name: string;
  email: string;
  bidAmount: number;
}

interface WinnerAnnouncementModalProps {
  isOpen: boolean;
  onClose: () => void;
  winner: Winner | null;
  caseTitle: string;
  totalBids: number;
}

export const WinnerAnnouncementModal: React.FC<WinnerAnnouncementModalProps> = ({
  isOpen,
  onClose,
  winner,
  caseTitle,
  totalBids
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <motion.div
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.8, opacity: 0 }}
        className="bg-white rounded-lg p-8 max-w-md w-full mx-4 text-center"
      >
        {winner ? (
          <>
            {/* Winner Celebration */}
            <motion.div
              initial={{ rotate: 0 }}
              animate={{ rotate: 360 }}
              transition={{ duration: 1, repeat: 2 }}
              className="mx-auto w-16 h-16 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mb-4"
            >
              <Trophy className="h-8 w-8 text-white" />
            </motion.div>

            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              🎉 Competition Winner! 🎉
            </h2>

            <p className="text-gray-600 mb-6">
              The competition for <strong>"{caseTitle}"</strong> has ended!
            </p>

            {/* Winner Info */}
            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 mb-6">
              <div className="flex items-center justify-center gap-3 mb-4">
                <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
                  {winner.name.charAt(0)}
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">{winner.name}</h3>
                  <p className="text-sm text-gray-600">Winning Lawyer</p>
                </div>
              </div>

              <div className="flex items-center justify-center gap-2 text-2xl font-bold text-green-600 mb-2">
                <DollarSign className="h-6 w-6" />
                {winner.bidAmount.toLocaleString()}
              </div>
              <p className="text-sm text-gray-600">Winning Bid Amount</p>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div className="bg-gray-50 rounded-lg p-3">
                <div className="text-2xl font-bold text-blue-600">{totalBids}</div>
                <div className="text-sm text-gray-600">Total Bids</div>
              </div>
              <div className="bg-gray-50 rounded-lg p-3">
                <div className="text-2xl font-bold text-green-600">100</div>
                <div className="text-sm text-gray-600">XP Earned</div>
              </div>
            </div>

            {/* Celebration Stars */}
            <div className="flex justify-center gap-1 mb-6">
              {[...Array(5)].map((_, i) => (
                <motion.div
                  key={i}
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ delay: i * 0.1 }}
                >
                  <Star className="h-6 w-6 text-yellow-400 fill-current" />
                </motion.div>
              ))}
            </div>
          </>
        ) : (
          <>
            <div className="mx-auto w-16 h-16 bg-gray-400 rounded-full flex items-center justify-center mb-4">
              <CheckCircle className="h-8 w-8 text-white" />
            </div>

            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              Competition Ended
            </h2>

            <p className="text-gray-600 mb-6">
              The competition for <strong>"{caseTitle}"</strong> has ended with no bids.
            </p>

            <div className="bg-gray-50 rounded-lg p-6 mb-6">
              <p className="text-gray-600">
                No lawyers participated in this competition. The case may be reopened for applications.
              </p>
            </div>
          </>
        )}

        <button
          onClick={onClose}
          className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          Close
        </button>
      </motion.div>
    </div>
  );
};