export default function CardDetailDeckModal({
  isOpen,
  card,
  decks,
  selectedDeck,
  onSelectedDeckChange,
  onAdd,
  onClose,
}) {
  if (!isOpen || !card) {
    return null;
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div
        className="bg-white rounded-2xl p-6 max-w-md w-full mx-4"
        style={{ backgroundColor: 'var(--bg-primary)' }}
      >
        <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
          Add to Deck
        </h3>
        <div className="mb-6">
          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
            Select Deck
          </label>
          <select
            value={selectedDeck}
            onChange={(e) => onSelectedDeckChange(e.target.value)}
            className="w-full p-3 rounded-xl border transition-all duration-200"
            style={{
              backgroundColor: 'var(--bg-secondary)',
              borderColor: 'var(--border)',
              color: 'var(--text-primary)',
            }}
          >
            <option value="">Choose a deck...</option>
            {decks
              .filter((deck) => deck.game === card.game)
              .map((deck) => (
                <option key={deck.id} value={deck.id}>
                  {deck.name}
                </option>
              ))}
          </select>
        </div>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={onAdd}
            disabled={!selectedDeck}
            className={`flex-1 px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
              selectedDeck
                ? 'gradient-bg-purple text-white hover:shadow-lg'
                : 'opacity-50 cursor-not-allowed'
            }`}
          >
            Add to Deck
          </button>
          <button
            type="button"
            onClick={onClose}
            className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
            style={{
              borderColor: 'var(--border)',
              color: 'var(--text-secondary)',
            }}
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}