import type { MapOption } from "../types";

interface VoteConfirmationProps {
  isOpen: boolean;
  cards: MapOption[];
  onConfirm: () => void;
  onCancel: () => void;
}

export default function VoteConfirmation({
  isOpen,
  cards,
  onConfirm,
  onCancel,
}: VoteConfirmationProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
        <h3 className="text-xl font-bold mb-4 text-gray-800">
          Confirm Your Vote
        </h3>
        <p className="text-gray-600 mb-4">
          Are you sure you want to submit this vote? Your ranking cannot be
          changed after submission.
        </p>
        <div className="mb-6">
          <h4 className="font-semibold mb-2 text-gray-700">
            Your current ranking:
          </h4>
          <ol className="text-sm text-gray-600 space-y-1">
            {cards.map((card, idx) => (
              <li key={card.name} className="flex items-center">
                <span className="font-bold mr-2">{idx + 1}.</span>
                <span>{card.name}</span>
              </li>
            ))}
          </ol>
        </div>
        <div className="flex space-x-3">
          <button
            onClick={onCancel}
            className="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded transition-colors duration-200"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            className="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition-colors duration-200"
          >
            Confirm Submit
          </button>
        </div>
      </div>
    </div>
  );
}
